vue做管理系统心得

vue框架Element、iview选择，ie9兼容，一键新建文件，常用配置等。环境搭建、路由拆分、API提取、mock

技术选型

Element、iview

1. 使用率（npm 平均下载频率，组件数量，star…)
   
   从start和周下载量上来看 element有更多的用户量
   
   
2. 代码更新
   
   
3. 包依赖
   
   
   
4. API风格
   
5. PC和移动端的可共用性
   
6. 基础、公共部分
   
7. IE9支持
   
8. 与设计师友好性
   
   本次选择了element，配合vue-element-admin，来搭建
   
   

环境搭建

使用 vue-element-admin

构建环境：dev、prod、test

功能：mock、一键新建文件、eslint、权限验证、api提取

本地跑build包

#安装express服务器 测试环境
npm install express-generator -g  
express expressDemo //expressDemo是项目名
cd expressDemo                                                                               npm install   #把dist目录下的所有文件复制到express项目的public文件夹下npm starthttp://localhost:3000/#/

路由拆分

分析业务，在ui框架基础上，分离子路由。

1.按业务拆分子路由

2.根据文件夹目录生成路由

改造

一键新建文件

node index.js 文件名  //新建
node index.js 文件名 --r //删除

var shell = require('shelljs')
var path = require('path')
var argv = process.argv.splice(2)
var pageName = argv[0]
function buildPage() {  if (argv.length > 0) {    
    // API    
    shell.touch(path.resolve(__dirname, 'src/api/' + pageName + '.js'))  
}}
function removePage() {  
    if (argv.length > 1) {    
    // API    
    shell.rm('-rf', path.resolve(__dirname, 'src/api/' + pageName + '.js'))  
}}
argv[1] && argv[1] === '--r' ? removePage() : buildPage()

API提取

webpack 3.0中 获取命令行参数，--env.prod=1即可获取

"dev": "build/webpack.dev.conf.js --env.prod=1",
"test": " build/webpack.dev.conf.js --env.prod=2"

const argv = require('yargs').argvconst 
baseUrlMap = {  1:"http//:a.com",  2:"http//:b.com"}
console.log(baseUrlMap[argv.env.prod])

白名单

登录权限中，控制登录权限采用文件控制拦截

const whiteList = ['/login', '/example/table'] // 免登录白名单

此处可以改造成路径拦截

IE9兼容

首先npm install --save babel-polyfill
然后在main.js中的最前面引入babel-polyfillimport 'babel-polyfill'
在index.html 加入以下代码（非必须）<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
在config中的webpack.base.conf.js中,修改编译配置entry:{
    app:['babel-polyfill','./src/main.js']      
}