一.初始化简单demo
1.首先全局安装vue-cli:
$npm install -g vue-cli
2.使用vue-cli初始化项目,初始化项目时vue-cli官方(https://www.npmjs.com/package/vue-cli)已经给提供了几种模板供大家选择，一般就用webpack
$vue init webpack myProject
3.上一步执行完毕，进入到项目里：
cd myProject
4.然后安装项目依赖的包，也就是在package.json文件里处在"devDependencies"下的包
$npm install
5.再安装生产环境下需要用到的包，也就是在package.json文件里处在"dependencies"下的包
$npm install xxx (如果同时安装多个包，中间用空格分开)
例如：
$npm install vuex axios (同时安装vuex和axios)
6.就紧接着再运行，这一步依赖于package.json文件里"scripts"下的内容
$npm run dev
7.就会看到浏览器里面自动打开一个页面本地页面 localhost：8080
此时一个简单的vue demo已经搭建成功了！
二.搭建完整的项目
1.路由
如果你构建的是系统类项目，有上百个路由，这样的话当你用webpack hot进行代码热更新的时候，速度就会超级慢，此时解决方法就是让他在开发环境下不要懒加载，在生产环境下再进行懒加载。
我们首先要定义一个变量
const _import = require('./_import_' + process.env.NODE_ENV);
process.env是读取系统环境变量的，比如你在启动服务的时候，设置环境变量为production或者development，那么在程序里面就可以通过process.env.NODE_ENV获取。此时你就需要再写两个文件(注意文件的名称命名)分别导出不同环境下的文件目录如：
*_production.js: module.exports = file => () => import('@/pages/' + file + '.vue')
*_develope.js: module.exports = file => import('@/pages/' + file + '.vue')
import文件
然后将组件路径定义为：
{path:'/app/customerSource',component:_import('customerSource')},
那么又是怎么设置环境变量为production或者development值的呢，是在配置文件index.js下
config/index.js
2.权限控制
main.js
这里使用了router.beforeEach注册一个全局的before钩子，来在导航触发之前判断是否有权限进入改导航页面。其中的“token”是用户登录成功，有服务器端返回的标识，如果它存在，则证明用户已经登录，所以
1.当其再访问登录页面（to.path === '/login'）时，可直接重定向到首页。
2.当其访问其他路由时，需要判断用户是否具有访问这些路由的权限，首先将用户所有的权限转换城路由挂载到router上，接着当访问路由上未挂载的页面时便会定向到404页面，访问挂载上的页面时，则会正常跳转。
3.设置白名单是避免一些页面浪费时间做重定向，比如404，login.
4.注意：这里还有一个小hack的地方，就是router.addRoutes之后的next()可能会失效，因为可能next()的时候路由并没有完全add完成，我们简单的通过next(to)巧妙的避开这个问题
网友评论