vue-element-admin前期准备
整体技术概括
目录结构
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filters // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
vendor:第三方依赖库的一个合集,当项目打包的时候，会将ElementUI，Vue，Vuex，axios，VueRouter等都打包进vendor.js里面
TinyMCE:跟word很类似，基本的文本功能需求都能满足
babel-loader：Babel是一个JavaScript编译器，能够使用新一代JS语法，编译成浏览器可识别的ES5语法。比如箭头函数
webpack
打包静态模块生成bundle.js 文件，而Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
alias配置别名
ESlint代码规范
封装axios
创建axios实例
const xxx = axios.create({
baseURL: api的base_url
timeout: 请求超时时间
})
axios的封装还可以进行环境的切换，通过简单的配置就可以在本地调试线上环境：
api 是根据 env 环境变量动态切换的，如果以后线上出现了bug，只需配置一下 @/config/dev.env.js 再重启一下服务，就能在本地模拟线上的环境了
多环境
dev：开发环境
prod：正式生产环境
sit：测试环境
stage：预发布环境
vue-cli 默认只提供了dev和prod两种环境
新版的 vue-cli 内置了 webpack-bundle-analyzer， 一个模块分析插件，可以看见项目分析图
前后端交互
跨域问题
dev环境也可以通过 webpack-dev-server的proxy来解决，开发环境用nginx反代理
CORS：市场上绝大多数浏览器都已经支持。（需要多看文档了解）
前后端的交互问题
文档生成器 swagger：一个REST APIs文档生成工具，可以在许多不同的平台上从代码注释中自动生成，开源，支持大部分语言。 （即把相关的信息存储在它定义的描述文件里面（yml或json格式），再通过维护这个描述文件可以去更新接口文档，以及生成各端代码。）
router-view
页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子。官方说可以通过watch监听$route的变化来做处理，其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子。如:
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route
}
}
登陆篇
需求满足
-
登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
-
权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。
权限篇
router.addRoutes
在以前vue-router必须是要vue在实例化之前就挂载上去的，不太方便动态改变。不过vue2.2.0以后新增了router.addRoutes。
注意事项：404 页面一定要最后加载，如果放在constantRouterMap（所有权限通用路由表）一同声明了404，后面的所以页面（addRoutes）都会被拦截到404
权限设置
vue-router官方推荐方法–>通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。
hack
前端hack：针对不同浏览器编写带有前缀的css 就是 css hack
路由守卫
只有next()是放行，其他的诸如：next(’/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行，而是：中断当前导航，执行新的导航
使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去,而其中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。
element-ui
侧边栏
基于element-ui的NavMenu来实现
侧边栏高亮问题:
element-ui官方已经给了default-active 所以我们只要:default-active="$route.path" 将default-active一直指向当前路由就可以
点击侧边栏刷新当前路由
spa（单页面开发）的开发模式 ，用户点击当前高亮的路由并不会刷新view，因为vue-router会拦截你的路由，它判断你的url并没有任何变化，所以它不会触发任何钩子或者是view的变化。
解决方法：
通过不断改变url的query来触发view的变化。我们监听侧边栏每个link 的 click事件，每次点击都给router push 一个不一样的query （可以用当前时间）来确保会重新刷新view。
两步验证
基于element-ui的MessageBox实现第三方验证的弹出
this.showDialog = true弹出选择第三方平台的dialog（最基础的就是微信或QQ作为登陆平台）
—关于平台登陆的授权问题和跳转问题太复杂了！
redirect
在不刷新页面的情况下，更新页面。
旧方案：通过不断改变url的query来触发view的变化
新方案:当遇到你需要刷新页面的情况，你就手动重定向页面到redirect页面，它会将页面重新redirect重定向回来，由于页面的 key 发生了变化，从而间接实现了刷新页面组件的效果。
removeRoutes
动态添加的路由，并不能动态的删除。导致当用户权限发生变化的时候，或者说用户登出的时候，我们只能通过刷新页面的方式，才能清空我们之前注册的路由。
解决方案：所有的 vue-router 注册的路由信息都是存放在matcher之中的，所以当我们想清空路由的时候，我们只要新建一个空的Router实例，将它的matcher重新赋值给我们之前定义的路由就可以了。巧妙的实现了动态路由的清除。现在我们只需要调用resetRouter，就能得到一个空的路由实例，之后你就可以重新addRoutes你想要的路由了。
snippets
自动生成代码片段
vscode可以直接安装插件