vue-element-admin 学习笔记

初识 vue-element-admin

vue-element-admin是一个后台前端解决方案，基于 vue 和 element-ui实现，内置动态路由，权限管理。

这是该后台模板的在线文档

在学习该文当前要先读完这9篇帮助文档有助于阅读在线文档

目录结构

目录内view 和 api 目录一一对应，方便维护

对于组件，要把公共组件如：文件上传，下载，富文本提取到common下,页面级的组件放到各自view目录下，方便管理

目录及文件命名规范

每创建一个view视图要在view下创建一个首字母小写文件夹（名字和路由一样），文件下默认是index.vue；
如果有子视图，也要创建相应的首字母小写文件夹下，里面也是命名为index.vue；
组件Component也是创建首字母小写的文件夹，默认命名也是index.vue；

EsLint

要配置保存自动修复格式错误，idea配置方法详见链接

封装axios

这里也是创建了axios实例，并编写了配置文件，配置axios实例方法，该框架不一样的地方，单独在dev.env.js && .env.development文件配置了base_api，可以配置多组，方便日后修改。

跨域问题

前后端均可解决

iconfont(symbol)

创建@/src/icons，将所有 icon 放在这个文件夹下。 之后我们就要使用到 webpack 的 require.context。

require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数：

- directory：说明需要检索的目录
- useSubdirectories：是否检索子目录
- regExp: 匹配文件的正则表达式

引用代码：

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
 

路由（router-view）

该框架内的路由，在@/router/index.js内配置，当用户点击Sidebar时触发路由跳转函数，跳转到对应路由组件，每次点击都是重新渲染组件。

当同一个组件被重复使用时，默认情况下两个页面切换时不会触发created||mounted，最简单的办法是在router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了

<router-view :key="key"></router-view>
 
computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }
 

路由嵌套

vue-router 不可以跨过父级路由直接访问到子集路由，所以父级路由必须指定页面，否则子路由将不显示,还有父级目录要写<router-view />