vue-cli+ webpack 搭建项目todolist

本文接着之前的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/>'
})

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

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

 <template>
   <div>
       <input type="text" v-model="inputValue">
       <button v-on:click="addItem">Add</button>
     <ul>
       <todo-list
         v-for="(item,index) in list"
         :key="index"
         :content="item"
         :index="index"
         @delete="deleteItem"
       ></todo-list>
     </ul>
   </div>
 </template>

 <script>
 import todoItem from './components/todoItem.vue';  //引入组件
 export default {
   components:{
     "todo-list": todoItem  //局部注册的组件起别名
   },
   data(){                  //这里的data写法和vue中不一样，这里data是一个 函数，return返回的是数据
     return{
       inputValue: '',
       list: [ ]
     }
   },
   methods:{
     addItem(){
       this.list.push(this.inputValue);
       this.inputValue = "";
     },
     deleteItem(index){
       this.list.splice(index,1);
     }
   }
 }
 </script>

 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>

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

 <template>
   <li >{{content}}<button v-on:click="handDel">remove</button></li>
 </template>

 <script>
 export default {
   name: 'todoItem',
   props: ['content','index'],
   methods:{
     handDel(){
       this.$emit('delete',this.index);
     }
   }
 }
 </script>

 <style scoped>  //scoped表示style的作用域只在本组件中有效，并不会影响父组件

 </style>

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

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

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

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