利用Vue-cli构建项目:
- 安装webpack:
npm install webpack -s
- 安装webpack-cli(webpack4.0版本后):
npm install webpack webpack-cli -g
- 安装vue-cli:
npm install vue-cli -g
- 进入项目文件夹构建项目:
vue init webpack programName //工程名称
- 安装依赖:
npm install //默认安装package.json里的依赖
- 安装路由:
npm install vue-router -s
- 启动项目:
npm run dev
- 编译项目:
npm run build
webpack笔记:
- loader的处理顺序是从最后一个到第一个。
踩坑
Vue
=>
内用了this
,并不能指向Vue
实例 。@click="func(paramA,paramB)"
回调函数是func
,而onclick = func(paramA,paramB)
回调函数是func
函数执行的结果。
Vue Router
-
异步加载组件:
()=>import("../")
。import()
返回promise -
next()
表示路由成功,直接进入to路由,不会再次调用router.beforeEach(), next({ path: '/login', }); 表示路由拦截成功,重定向至login,会再次调用router.beforeEach()
,导致无限循环。 -
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
new Vuex.Store
,构造函数创建新实例要大写开头。- 如果store除了module还自带state, module会变成
0
1
{
0:{/*模块1 state*/},
1:{/*模块2 state*/},
// 其他实例的state
}
复制代码