初识vue-element-admin

最近看了一下vue-element-admin项目，它是基于vue-cli3创建的项目

创建vue-cli3项目

1. 安装vue-cli npm install -g @vue/cli vue create project
2. default: 默认
   Manually select features 手动（Manually）

   

3. 选择配置，看个人项目需求
4. TypeScript 支持使用 TypeScript 书写源码
   Progressive Web App (PWA) Support PWA 支持。
   Router 支持 vue-router 。
   Vuex 支持 vuex 。
   CSS Pre-processors 支持 CSS 预处理器。
   Linter / Formatter 支持代码风格检查和格式化。
   Unit Testing 支持单元测试。
   E2E Testing 支持 E2E 测试。

   

5. 根据项目的选择配置 选择router 是否为hash 还是history css-processor 预编译环境配置 eslint一些配置
6. npm run serve 运行项目
7. 项目根目录下手动新建一个 vue.config.js，一些基础的配置 可参考链接描述

vue-element-admin 代码

我们在项目中可以通过process.env.NODE_ENV 可以分辨是开发环境（development） 生产环境（production） 无需设置 npm run serve npm run build 会自动匹配环境
在根目录下

        新建 .env.development  这个文件设置开发环境变量名
        新建.env.production 这个文件可以设置生产环境变量名
        通过process.env.变量名  拿到这两个文件的变量名 

1. main.js

      项目的入口 
      拦截路由的功能 检测用户是否登录，用户没有登录跳转到登录页面
   
      // 白名单 无需登录的页面
      const whiteList = ['/login']
      router.beforeEach((to, from, next) => {
        if(!utils.storage.get('m_userInfo')) {
          if (whiteList.indexOf(to.path) !== -1) {
            next()
          } else {
            next(`/login?redirect=${to.path}`)
          }
        } else {
          next()
        }
      })
      
   
   

2. 网络请求 request.js

      封装axios 
   
   
      ```
      const ajax = axios.create({
          baseURL: process.env.VUE_APP_BASE_URL, //在.env.development  .env.production 获取base_url
          timeout: 10000
      })
      // 设置请求拦截器
      ajax.interceptors.request.use(config => { 
          let m_userInfo: any = storage.get('m_userInfo')
      
          if (m_userInfo) { 
              config.headers['access-token'] = m_userInfo.token
          }
          return config
      }, error => {
          return Promise.reject(error)
      })
      // 返回拦截器
      ajax.interceptors.response.use(
          response => {
              const {code, message, data} = response.data || {
                  code: '',
                  message: '',
                  data: {}
              }
              if(code != 1) {
                  // code 不为1的情况 弹框提示
                  Message({
                      message: message || 'Error',
                      type: 'error',
                      duration: 5 * 1000 
                  })
                  return Promise.reject(message)
              } else {
                  return data
              }   
          }, error => {
              return Promise.reject(error)
          }
      )
      ```
      
   
   

3. Layout 组件 (所有路由的组件都是layout)

      菜单栏 根据 router.js 配置的路由并且根据权限动态生成的，同时使用了递归组件，不管你路由多少级嵌套。权限验证那里也做了递归的处理(hidden: true 不显示在菜单栏)。
      页面 ：通过<router-view /> 通过this.$router.path 获取路由显示主页面

4. route.js

      // 异步加载路由 在meta字段设: 设置该页面的访问权限
      export const asyncRouterMap = [{
      path: '/permission',
      component: Layout,
      name: '测试权限',
      meta: { role: ['admin','editor'] }, //页面需要的权限
      children: [
      { 
        path: 'index',
        component:Test,
        name: '权限测试页',
        meta: { role: ['admin','editor'] }  //页面需要的权限
      }]}]
      
   

5. vuex

      module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
      export default new Vuex.Store({
          modules: {
              // 组件内的 store
          }
      })
      在组件内 使用 computed：{
          ...mapGetters([
          ])
      }可以拿到 state