Vue UI:
一个可视化图形界面,方便你去创建、更新和管理项目的方方面面
router区别
在控制台打出this的时候，发现router同时存在
router为VueRouter实例，想要导航到不同URL，则使用$router.push方法（路由跳转）
vue路由的懒加载
按需加载，避免一次加载的内容过多，时间过长，出现长时间的白屏
用法：
- router.config.js中引入路由组件 const List= resolve => require(['路由组件的路径'],resolve)
- 文件打包时，路由组件被打包成不同的js文件，需要的时候引入
- output.chunkFilename设置打包的路由组件js文件名（使用默认的id命名可以不用设置）
publicPath
- 开发环境：
- 不配置，build.js文件打包到根目录下
- 配置，build.js文件打包到output.publicPath下
- 例：publicPath:'/hello', build.js文件打包到hello下
- 生产环境：
- 不论配不配置，build.js文件打包到根目录下output.path下
- publicPath指向到output.path
- 备注：
1）所有组件中，资源引入使用相对路径；
2）html中引入资源，正常写；script中引入资源需用require
路由跳转
this.$router.push(参数)
参数：path+query或者name+params组合使用
为什么能直接用this.
store？
vuerouter实例、vuex实例的store方法，都被挂在到了vue实例上，所以能直接用
vuex
- import {mapGetters,mapActions} from 'vuex'
- coumputed:mapGetters(['属性1','属性2']) methods:mapActions(['方法1','方法2'])
- store属性设置
const actions={
方法1({commit}){
commit('方法1')
}
}
const mutations={
方法1(state){
state.userHome=false
}
}
const getters={
属性1(state){
return state.userHome
}
}
- 导出store且挂在到vue上
