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-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 '组件路径' 引入

 1 <template>
 2   <div>
 3       <input type="text" v-model="inputValue">
 4       <button v-on:click="addItem">Add</button>
 5     <ul>
 6       <todo-list 
 7         v-for="(item,index) in list"
 8         :key="index"
 9         :content="item"
10         :index="index"
11         @delete="deleteItem"
12       ></todo-list>
13     </ul>
14   </div>
15 </template>
16 
17 <script>
18 import todoItem from './components/todoItem.vue';  //引入组件
19 export default {
20   components:{
21     "todo-list": todoItem  //局部注册的组件起别名
22   },
23   data(){                  //这里的data写法和vue中不一样，这里data是一个 函数，return返回的是数据
24     return{
25       inputValue: '',
26       list: [ ]
27     }
28   },
29   methods:{
30     addItem(){
31       this.list.push(this.inputValue);
32       this.inputValue = "";
33     },
34     deleteItem(index){
35       this.list.splice(index,1);
36     }
37   }
38 }
39 </script>
40 
41 <style>
42 #app {
43   font-family: 'Avenir', Helvetica, Arial, sans-serif;
44   -webkit-font-smoothing: antialiased;
45   -moz-osx-font-smoothing: grayscale;
46   text-align: center;
47   color: #2c3e50;
48   margin-top: 60px;
49 }
50 </style>

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

 1 <template>
 2   <li >{{content}}<button v-on:click="handDel">remove</button></li>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   name: 'todoItem',
 8   props: ['content','index'],
 9   methods:{
10     handDel(){
11       this.$emit('delete',this.index);
12     }
13   }
14 }
15 </script>
16 
17 <style scoped>  //scoped表示style的作用域只在本组件中有效，并不会影响父组件
18 
19 </style>

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

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

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

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

vue-cli+ webpack 搭建项目todolist

猜你喜欢