1. Python技术站首页
  2. 其他
  3. Vue

webpack4手动搭建Vue开发环境实现todoList项目的方法

• Vue

下面是“webpack4手动搭建Vue开发环境实现todoList项目的方法”的完整攻略。

步骤一：初始化项目

先创建一个新的文件夹，进入文件夹中进行以下操作：

1.使用npm初始化项目：

npm init

根据提示输入项目信息。

2.安装webpack和webpack-cli:

npm install webpack webpack-cli --save-dev

步骤二：安装其他依赖

1.安装vue, vue-template-compiler 和 vue-loader：

npm install vue vue-template-compiler vue-loader --save-dev

2.安装css-loader, style-loader:

npm install css-loader style-loader --save-dev

步骤三：创建Webpack配置文件

在项目的根目录下创建webpack.config.js文件，配置webpack的入口，出口等信息：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ]
  }
};

在上面的代码中，我们定义了入口文件为src/main.js，打包后生成的文件为dist/bundle.js，同时我们添加了vue-loader和css-loader作为模块的loader。

步骤四：创建Webpack插件

在此步骤中，我们将安装html-webpack-plugin，该插件可以自动将bundle.js注入HTML文件中并生成一个新的文件。

npm install html-webpack-plugin --save-dev

修改webpack.config.js文件，加入html-webpack-plugin的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //...省略其它配置
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',//指定模板页面
      filename:'index.html',//指定生成的页面名称
      inject:true,//是否将打包后的脚本注入到模板页面中
    }),
  ]
};

步骤五：创建Vue组件

在src目录下创建App.vue文件作为Vue组件，组件的代码如下：

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" placeholder="Add a to-do item" v-model="newItem" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="item-dec">{{ item }}</div>
        <div class="item-btns">
          <button @click="deleteItem(index)">Delete</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style>
.item-dec {
  display: inline-block;
  width: 80%;
}

.item-btns {
  display: inline-block;
  width: 20%;
  text-align: right;
}
</style>

步骤六：创建JavaScript入口文件

在src目录下创建main.js文件，并在其中导入Vue和App组件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

在此，我们使用了Vue的渲染函数(render function)，来渲染我们的App组件。

步骤七：创建HTML模板文件

在src目录下创建一个index.html文件，使用Webpack打包时，该文件会被处理并输出到目标文件夹（我们在Step3中配置的是dist目录）。

在index.html中，我们需要包含我们的打包后的文件(bundle.js)和根元素（在本例中指的是id为app的div元素）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList App</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

步骤八：创建启动应用的脚本

在项目根目录下创建一个启动应用的脚本，比如命名为run.js，代码如下：

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

webpack(webpackConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 构建过程出现错误
    console.error(err);
    return;
  }
  console.log('构建完成');
});

步骤九：使用命令启动应用

在package.json文件中添加如下npm命令：

{
  "scripts": {
    "dev": "node run.js"
  }
}

现在我们的开发环境的配置已经完成，可以使用npm run dev命令在浏览器中运行应用了。

在浏览器中访问 http://localhost:8080/ ，即可看到todoList的页面。

下面是一个示例（示例代码中省略掉了部分骨架代码）：

webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      inject:true,
    }),
  ]
};

App.vue文件：

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" placeholder="Add a to-do item" v-model="newItem" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="item-dec">{{ item }}</div>
        <div class="item-btns">
          <button @click="deleteItem(index)">Delete</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style>
.item-dec {
  display: inline-block;
  width: 80%;
}

.item-btns {
  display: inline-block;
  width: 20%;
  text-align: right;
}
</style>

main.js文件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList App</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

run.js文件：

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

webpack(webpackConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
    return;
  }
  console.log('构建完成');
});

完整示例代码可以在我的github中找到（https://github.com/zhangxiangliang/webpack-vue-todoList）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack4手动搭建Vue开发环境实现todoList项目的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • axios中post请求json和application/x-www-form-urlencoded详解

    Axios中POST请求JSON和application/x-www-form-urlencoded详解 什么是POST请求？ POST请求是HTTP协议中的一种请求方式，在请求体中携带需要传输的数据。可能被用于编辑、更新、上传等操作。POST请求方式相对于GET请求方式来说，更加安全和灵活，所以在实际开发中被广泛使用。 axios中POST请求的两种方式 …

    Vue 2023年5月27日
    00

  • 详解Vue + Vuex 如何使用 vm.$nextTick

    下面让我给您详细讲解“详解Vue + Vuex 如何使用 vm.$nextTick”的完整攻略。 简介 在Vue.js中，使用vm.$nextTick方法可以强制Vue.js在下次DOM更新循环结束后执行回调，这样可以确保我们获取到的DOM元素是更新后的DOM元素，而不是更新前的DOM元素，因为DOM更新是异步进行的。 使用方法 在一些需要对DOM立即进行操…

    Vue 2023年5月28日
    00

  • vue中循环请求接口参数问题及解决

    下面是“vue中循环请求接口参数问题及解决”的完整攻略。 问题描述 在Vue中，我们有时需要使用循环来请求后端接口的数据。例如，我们可能需要在一个页面上显示多个商品的信息，每个商品的详细信息都需要通过调用接口来获取。这时候，我们会发现循环的次数和请求的参数之间存在一定的关系，如果我们直接在循环内部发送异步请求，可能会造成请求重复提交或者请求参数不正确的问题，…

    Vue 2023年5月27日
    00

  • Vue中this.$nextTick的作用及用法

    Vue.js 是一个流行的JavaScript框架，结合了大量的模板语法、组件化和数据响应机制等特性，方便开发者构建交互式的Web应用。而this.$nextTick则是Vue.js框架中的一个非常重要的API，用于解决Vue更新DOM所带来的异步问题，下面就来详细讲解Vue中this.$nextTick的作用及用法： 什么是this.$nextTick？ …

    Vue 2023年5月28日
    00

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法主要有以下几种： 使用link和script标签引入外部css和js文件 我们可以通过在Vue项目的index.html文件中使用link和script标签来引入外部的css和js文件。 在html文件中，我们使用link标签引入外部css文件。例如： <link href="./assets/css/style…

    Vue 2023年5月28日
    00

  • vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

    问题描述： 在使用 vuex 进行数据管理时，如果存储了复杂参数例如对象数组等，当页面刷新时会发现数据丢失，这是因为 vuex 存储在内存中，刷新页面时内存被清空导致的。 解决方法： 我们可以通过以下步骤将 vuex 中的数据存储到本地存储中，以便在刷新页面后能够恢复数据。 安装 vuex-persistedstate shell npm install v…

    Vue 2023年5月28日
    00

  • Vue-CLI 3.X 部署项目至生产服务器的方法

    下面是关于如何使用Vue-CLI 3.X 部署项目至生产服务器的完整攻略： 1. 生成生产环境代码 在部署之前，我们需要先生成生产环境代码。在命令行终端中，进入项目的根目录，然后输入以下命令即可： npm run build 这会将项目打包为生产环境的代码，并将最终生成的代码存储在dist目录中。 2. 部署到生产服务器 有多种方式可以将Vue.js项目部署…

    Vue 2023年5月28日
    00

  • 基于vue-draggable 实现三级拖动排序效果

    当我们需要实现在前端页面中完成三级拖动排序效果的时候，可以使用vue-draggable组件来完成。具体实现步骤如下： 步骤一：安装vue-draggable 首先要安装vue-draggable组件： npm install vuedraggable 步骤二：定义基本结构 在Vue组件中，我们需要定义一些基本的结构，包括三个列表，两个按钮等。可以参考以下代…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部