Vue基础---vue-cli的使用

 

一、 Vue-cli的简介与使用

a. 安装  (前提是先安装好了node)

a) node -v |npm -v 否则先去官网下载node  

 

b) 官网https://cn.vuejs.org/-> 学习->教程->安装

 

c) 全局安装 (命令行 npm install --global vue-cli)

 

d) 创建项目

Vue init webpack 项目名称  //使用webpack模板创建标准的vue项目

 

 

 

 

e) 进入到todolist(刚才创建的项目目录) cd todolist   npm run dev         在todolist目录下启动项目

 

 

f) 打开项目文件夹

 

g) Main.js

 

h) App.Vue

 

 

 

 

 

二、用Vue-cli开发todolist

b. 启动项目  进入项目目录   npm run dev|start

 

 

c. App.vue 重命名 TodoList   main.js 重新配置

 

d. 实现TodoList

 

a) 将li展示数据 定义成组件

i. 重命名components/HelloWorld.vue->todoItem

 

ii. 在TodoList.vue中引入组件

 

 

iii. 删除功能  子组件发布 父组件监听(订阅)

 

 

Main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import TodoList from './TodoList'   Vue.config.productionTip = false   /* eslint-disable no-new */ new Vue({   el: '#app',   components: { TodoList },   template: '<TodoList/>' })

TodoList.vue <template>   <div>       <div>         <input  v-model="inputValue"/>         <button @click="handleSubmit">提交</button>       </div>       <ul>         <todo-item v-for="(item,index) of list"         :key="index"         :content="item"         :index="index"         @delete="handleDelete">         </todo-item>       </ul>   </div> </template>     <script> import TodoItem from './components/TodoItem' ; export default {     components:{       'todo-item':TodoItem     } ,     data() {         return {             inputValue:'' ,           list:[] ,         }     },     methods:{       handleSubmit() {           this.list.push(this.inputValue) ;           this.inputValue = '' ;       } ,       handleDelete(k) {           this.list.splice(k,1) ;       }          } } </script>   <style>   </style>

TodoItem.vue <template>     <li @click="handleClick">{{index}}=>{{content}}</li> </template>   <script> export default {      props:['index','content'] ,   methods:{       handleClick() {           this.$emit('delete',this.index) ;       }   } } </script>     <style scoped>   </style>

 

e. 全局样式与局部样式

a) 使用vue-cli 每个组件变成单文件组件 在文件中可以修改组件的模板 逻辑 样式

 

f. 推荐加上 scoped 作用于 只对当前有效  若是不加 是全局样式  会影响其他组件