自用Vue全家桶笔记

利用Vue-cli构建项目:

1. 安装webpack: npm install webpack -s
2. 安装webpack-cli(webpack4.0版本后): npm install webpack webpack-cli -g
3. 安装vue-cli: npm install vue-cli -g
4. 进入项目文件夹构建项目: vue init webpack programName //工程名称
5. 安装依赖: npm install //默认安装package.json里的依赖
6. 安装路由: npm install vue-router -s
7. 启动项目: npm run dev
8. 编译项目: npm run build

webpack笔记:

1. loader的处理顺序是从最后一个到第一个。

踩坑

Vue

1. =>内用了this，并不能指向Vue实例 。
2. @click="func(paramA,paramB)"回调函数是func，而onclick = func(paramA,paramB)回调函数是func函数执行的结果。

Vue Router

1. 异步加载组件:()=>import("../")。 import()返回promise

2. next()表示路由成功，直接进入to路由，不会再次调用router.beforeEach(), next({ path: '/login', }); 表示路由拦截成功，重定向至login，会再次调用router.beforeEach()，导致无限循环。

3. beforeRouteEnter，在实例创建前生效，所以不能用this，只能在next(vm=>{})调用(vm:vue实例)。

• vm.$route: 当前页面路由对象:

{name: "主页", 
meta: {…}, 
path: "/", 
hash: "", 
query: {…}, …} 
fullPath : "/" 
hash : "" 
matched : [{…}] 
meta : {} 
name : "主页" 
params : {} 
path : "/" 
query : {}
复制代码

• vm.$router：路由的实例，可用push、replace等方法

Vuex

1. new Vuex.Store，构造函数创建新实例要大写开头。
2. 如果store除了module还自带state, module会变成 0 1

{
 0:{/*模块1 state*/},
 1:{/*模块2 state*/}，
 // 其他实例的state
}
复制代码

转载于:https://juejin.im/post/5b9b559f6fb9a05d2e1b8a5e