初识vueelementadmin

最近看了一下 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