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.vue

TodoItem.vue

 

e. 全局样式与局部样式

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

 

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