Vue脚手架：
vue-cli：
全局安装：
npm install -g vue-cli
查看版本：
vue -V
初始化脚手架：
vue init webpack + 项目的名字
运行项目：
npm run dev
打包项目：
npm run build
文件及文件夹的信息：
开发依赖： 开发编译打包需要的依赖，打包之后就不要了 生产依赖： 打包前后都需要的依赖
在router文件夹下新建js文件：
import VueRouter from 'vue-router'//引入路由模块 import Vue from 'vue' Vue.use(VueRouter)//依赖模块 let router=new VueRouter({ routes:[ {path:'路径（加斜杠访问）',name:"名字（直接访问）",component:'注册组件（跳转的位置）',chidern:[]子路由} {path:'/',redirect:"/home"},//路由的重定向 如果hash 为'/' 指向到 /home ] }) export default router
通过标签来切换组件
通过标签显示
keep-alive:在component组件、router-view外面包裹上keep-alive的话，就会对组件进行缓存，当切换回来的时候，组件会立即渲染，理论来说，切换组件的时候其实会把上一个组件销毁，使用了keep-alive则不会(就是组件一直存在于缓存中)
include匹配到的组件会被缓存，exclude匹配到的不会被缓存
值可以为逗号隔开的字符串include = ‘a,b’;正则:include = ‘/a|b/’;数组:include=[‘a’,’b’]
多级路由：
const routes = [ {path:'/main',component:AppMain}, {path:'/news',component:AppNews,children:[//children是子目录 {path:'inside',component:AppNewsInside}, {path:'outside',component:AppNewsOutside} ]}, ]
默认路由：
{path:'',component:Main}//将默认路径设置成Main
动态路由：
{path:'/user/:id',component:User}//id为传的值
命名路由：
直接用name : main在hash中写name就可以路由
路由跳转：
router.push = router-link:to router.replace = router-link:to.replace router.go() = window.history.go
路由钩子：
全局路由钩子：
router.beforeEach((to, from, next) => { //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了 console.log('beforeEach') console.log(to,from) // next() }) // router.afterEach((to, from) => { //会在任意路由跳转后执行 console.log('afterEach') })
局部路由：
routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]
组件内的路由钩子：
beforeRouteEnter (to, from, next) //confirm 前调用 beforeRouteUpdate (to, from, next) //在当前路由改变调用 beforeRouteLeave (to, from, next)//导航离开该组件的对应路由时调用
生命周期：
beforeCreate：
创建组件之前，没有组件，没有元素，没有事件，没有生命周期
created：
创建组件结束，有数据，没有元素
beforeMount：
挂载之前，有数据，没有元素
mounted：
挂载完成，有元素，有数据
beforeUpdate：（在mounted后执行）
用于监听数据变化
updated：
用于监听数据变化
beforeDestroy：
销毁实例，元素数据还在
destroyed：
销毁实例
Vue中的ajax：
axios：
载入：npm install axios
在main.js中
import Axios from 'axios';//引入 Vue.prototype.$axios = Axios;//将Axios附着在Vue，以供全局调用 Axios.defaults.baseURL = 'http://localhost:1024';//设置默认接口地址
然后在需要请求的组件中：
this.$axios .post("hash",data)//hash是接口地址，不需要加主机地址（http://localhost/index直接写/index）data是传输的对象 .then(res => {//返回值 if (res.data.err == 0) { console.log(res) } }) .catch(err => { console.log(err); });
axios拦截器：
请求拦截：
axios.interceptors.request.use(function (config) {//发送之前进行过滤 return config; }, function (error) { return Promise.reject(error); });
响应拦截：
axios.interceptors.response.use(function (response) {//请求到数据后进行过滤 return response; }, function (error) { return Promise.reject(error); });
Vuex：
作用：多个组件共享状态及数据
安装：npm install vuex
配置：在src中新建store文件夹：在里面新建js文件
import Vue from 'vue' import Vuex from 'vuex'//引入Vuex Vue.use(Vuex); import login from './login/index' const store = new Vuex.Store({ modules: { login: login, } }) export default store;//抛出vuex实例
在src中新建的store文件夹中新建另一个文件夹：里面有5个js文件
大致示范一下里面的内容(部分购物车内容，大概看一下就好)：
index.js
import state from './state'; import mutations from './mutations'; import getters from './getters'; import actions from './actions'; let store = { state, mutations, getters, actions }; export default store;
state.js
export default { carObj: [], }
getters.js
export default { // 派生属性 all(state) { var price = 0; var sum = 0; var seleceAll = true; for (let i = 0; i < state.carObj.length; i++) { if (state.carObj[i].sel) { price += state.carObj[i].price * state.carObj[i].num; sum += state.carObj[i].num; } seleceAll *= state.carObj[i].sel; } return { price: price, sum: sum, seleceAll: seleceAll } } }
mutations.js:
export default { //只做状态值得修改 不做任何逻辑操作 addTo(state, carObj) { state.carObj = carObj } }
actions.js:
export default { // // 异步处理逻辑操作 initCar({ commit }) { let carlist = localStorage.carlist ? JSON.parse(localStorage.carlist) : []; commit('addTo', carlist) } }
主要流程：（官网的）
初步理解就是：通过actions的函数改变states（数据），渲染到所有绑定的页面，页面再次调用actions（函数），再次修改
深层理解：组件触发actions传递数据（抛发），触发mutations修改状态值，修改state的值，渲染到页面
辅助工具：
import { mapState，mapGetters，mapMutations，mapActions } from 'vuex'
引入辅助工具使组件可以设置或获取到函数及数据
this.$store//获取到store
mapStates：
computed: { // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ //state中的变量名 }) }
mapGetters：
computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter' ]) }
mapMutations：
methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]) }
mapActions：
methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]) }
