本文接着之前的todolist例子，通过vue-cli + webpack 搭建项目：针对于vue-cli 2.x版本，更高版本找官网https://cli.vuejs.org/guide/installation.html

1. 环境搭建

检查电脑是否已经安装有npm 和 node ，通过npm -v 或者node -v查看版本

#安装 vue-cli （最好全局安装）

npm install -g vue-cli 　　　　//安装的是vue-cli2.x

npm install -g @vue/cli　　    //安装的是vue-cli3.x

#使用vue-cli初始化项目（这里假设项目名是 todolist）

vue init webpack todolist

#进到目录

cd todolist

#运行

npm run dev

浏览器访问 http://localhost:8080 （默认打开的是index.html文件）

基本目录结构如图：src 目录下是核心代码

 

使用webpack打包后默认加载main.js文件并将其引入到index.html文件中

2. main.js文件默认会引入相关模块以及组件，这里引入组件App.vue, 模板也是App

import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  // router,  components: { App },  template: '
     '})

App.vue是组件入口，页面的开发都在这里进行，注意template中只允许有一个根元素，所以最外层要用div包起来，

在这个例子中ul中的li拆分成了另一个组件<todo-list>，通过在js中 用 import 组件名 from '组件路径'  引入

1 
     16 17 40 41 

自定义的组件 /src/components/todoItem.vue, 这里定义了li,  props是子组件接收的参数

1 
      4  5 16 17 

至此todolist的代码已经编写完成，vue-cli自动配置好了脚本和依赖，直接运行以下命令

npm run dev    //表示开发环境，不会生成打包文件，通过http://localhost:8080访问页面

npm run build //表示生产环境，会默认生成打包文件dist/index.html

3. 页面显示如下：点击remove可移除