本文接着之前的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可移除