常用插件
vue-cli
快速构建vue项目的脚手架工具
安装并构建项目
1. npm install -g vue-cli
2. 选择webpack模板搭建vue项目：vue init webpack cartool
3.启动项目
进入cartool目录，执行npm run dev 通过localhost:8080访问，用webstorm打开项目进行开发
webpack
WebPack可以看做是模块打包机，通过分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用；
Webpack的工作方式是：把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
npm
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。
- 判断是否安装成功
npm -v
- 使用 npm 命令安装模块
$ npm install <Module Name>
vue-router
提供路由支持
vuex
Vuex的核心是一个全局store，其为一个容器，包含着应用中大部分的状态(state)。在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。
state
Vuex 使用单一状态树 —— 用一个对象就包含了全部的应用层级状态，每个应用将仅仅包含一个 store 实例。
this.$store.state.count
继承mixin
// A.js
export default {
props: {
items: []
}
data(){
return { selectedItem: null};
}
...
}
//B.vue
import A from '.A';
export default {
name: 'B',
mixins: [A ]
}
//C.vue
import A from '.A';
export default {
name: 'C',
mixins: [A ]
}
vue-axios
npm install axios
npm install --save axios vue-axios
配置模板
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
父子组件
- 父组件通过props属性向子组件传递数据
- 子组件通过事件emit给父组件发送消息。
