vue-element-admin简单教程（页面权限控制，插件安装，环境变量）

刺骨的言语ヽ痛彻心扉 2021-10-06 02:28 1248阅读 0赞

### 需要安装git和node ###

官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

## 1.安装及目录 ##

**安装步骤**

# 克隆项目
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    # 进入项目目录
    cd vue-element-admin
    # 安装依赖
    npm install
    
    # 本地开发 启动项目
    npm run dev
    
    # 打包正式环境
    npm run build:prod
    # 打包预发布环境
    npm run build:stage

**目录文件**

├── build                      // 构建相关  
    ├── config                     // 配置相关
    ├── src                        // 源代码
    │   ├── api                    // 所有请求
    │   ├── assets                 // 主题 字体等静态资源
    │   ├── components             // 全局公用组件
    │   ├── directive              // 全局指令
    │   ├── filtres                // 全局 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

**布局图片**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]

## 2. 路由与侧导航 ##

**侧边栏和路由是绑定在一起的。 配置路由后会自动添加到侧导航**。如果不需要测导航，需要到Layout文件的文件中修改源码

**配置项举例**

{ 
      path: '/permission',
      component: Layout,
      redirect: '/permission/index',    //重定向地址，在面包屑中点击会重定向去的地址
      hidden: true,       // 不在侧边栏线上
      alwaysShow: true,     //一直显示根路由
      meta: {  roles: ['admin','editor'] },    //在根路由设置权限，下面的子路由都继承了这个权限
      children: [{ 
        path: 'index',
        component: ()=>import('permission/index'),
        name: 'permission',
        meta: { 
          title: 'permission',
          icon: 'lock', //图标
          role: ['admin','editor'],    //或者你可以给每一个子路由设置自己的权限
          noCache: true ,    // 不会被 <keep-alive> 缓存
    	  breadcrumb: false    // 如果设置为false，则不会在breadcrumb面包屑中显示
        }
      }]
    }

路由种类：constantRoutes和asyncRoutes

export const constantRoutes = [  //代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。
      { 
        path: '/redirect',
        component: Layout,
        hidden: true,
        children: [
          { 
            path: '/redirect/:path*',
            component: () => import('@/views/redirect/index')
          }
        ]
      },
    ];
    export const asyncRoutes = [ //代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
      { 
        path: '/permission',
        component: Layout,
        redirect: '/permission/page',
        alwaysShow: true, 
        name: 'Permission',
        meta: { title: 'Permission',icon: 'lock',roles: ['admin', 'editor']
        },
        children: [
          { 
            path: 'page',
            component: () => import('@/views/permission/page'),
            name: 'PagePermission',
            meta: { title: 'Page Permission',roles: ['admin'] }
          }
        ]
      },
    ]

## 3. 路由页面权限 ##

*  **验证流程：**  
    **提交账号密码——返回token（存储）——请求获取用户信息（userInfo）——得到用户名称，头像，roles等（存储）——通过roles动态生成路由并添加**

主要涉及登录流程文件夹：
    	router/index.js（封装路由）
    	store/index.js (建立vuex实例和相关导入模板）
    	store/getters.js(使用getter获取store数据）
    	
    	store/modules /user.js (进行发送登录请求等及存储vuex及cookie)
    	api/user.js (封装好的登录请求，获取用户信息请求，退出登录请求等)
    	store/modules/permission.js (进行路由筛选判断等。生成动态路由)
    	permission.js ( 包含全局路由导航钩子router.beforeEach（），也就是添加路由的操作)

*  **点击提交：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]
 *  **进行登录请求，存储token （store/modules /user.js）**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]
 *  **获取用户信息请求及动态生成路由**  
    生成相关路由判断文件（store/modules/permission.js）  
    ![在这里插入图片描述][20191101172019147.png]

//permission.js
    import {  asyncRoutes, constantRoutes } from '@/router' //导入路由两个路由数组
    
    function hasPermission(roles, route) { // 判断路由是否包含roles
      if (route.meta && route.meta.roles) { 
        return roles.some(role => route.meta.roles.includes(role))
      } else { 
        return true
      }
    }
    
    export function filterAsyncRoutes(routes, roles) {  // 判断逻辑
      const res = []
      routes.forEach(route => {  // 循环动态添加的路由钩子
        const tmp = {  ...route }
        if (hasPermission(roles, tmp)) {  // 判断路由是否满足roles
          if (tmp.children) {  // 有子路由判断子路由
            tmp.children = filterAsyncRoutes(tmp.children, roles)
          }
          res.push(tmp)
        }
      })
    
      return res
    }
    
    const state = { 
      routes: [],
      addRoutes: []
    }
    
    const mutations = { 
      SET_ROUTES: (state, routes) => {  // 添加路由
        state.addRoutes = routes
        state.routes = constantRoutes.concat(routes)
      }
    }
    
    const actions = { 
      generateRoutes({  commit }, roles) { 
        return new Promise(resolve => { 
          let accessedRoutes
          if (roles.includes('admin')) {  // 超级管理员左右路由都可看
            accessedRoutes = asyncRoutes || []
          } else {  // 其它权限进行判断
            accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
          }
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes)
        })
      }
    }
    
    export default { 
      namespaced: true,
      state,
      mutations,
      actions
    }

添加路由的文件（permission.js）

import router from './router'
    import store from './store'
    import {  Message } from 'element-ui'
    import NProgress from 'nprogress' // progress bar
    import 'nprogress/nprogress.css' // progress bar style
    import {  getToken } from '@/utils/auth' // get token from cookie
    import getPageTitle from '@/utils/get-page-title'
    
    NProgress.configure({  showSpinner: false }) // NProgress Configuration
    
    const whiteList = ['/login'] // no redirect whitelist
    
    router.beforeEach(async(to, from, next) => { 
      NProgress.start()
      document.title = getPageTitle(to.meta.title)
      
      const hasToken = getToken();//判断用户是否登录，获取token。
      let flag = 0;
      if (hasToken) { 
        if (to.path === '/login') {  // 有token且路由为login
          next({  path: '/' })
          NProgress.done()
        } else { 
          const hasGetUserInfo = store.getters.name
          if (hasGetUserInfo) {  // 本地储存有用户名
            next()
          } else { //首次登录的情况下
            try {        
              if (flag == 0) { 
                const {  roles } = await store.dispatch('user/getInfo')
                // 动态生成路由
                const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
                router.addRoutes(accessRoutes)// 动态添加路由
                router.options.routes = store.state.permission.routes;// 渲染侧导航
                flag++;
                next({  ...to, replace: true }) 
              } else {  // 解决页面刷新问题
                next()
              }   
            } catch (error) {  // 重新登录
              await store.dispatch('user/resetToken')
              Message.error(error || 'Has Error')
              next(`/login?redirect=${ to.path}`)
              NProgress.done()
            }
          }
        }
      } else { //没有token返回登录页，重新登录
        if (whiteList.indexOf(to.path) !== -1) { 
          next()
        } else { 
          next(`/login?redirect=${ to.path}`)
          NProgress.done()
        }
      }
    })
    
    router.afterEach(() => { 
      NProgress.done()
    })

## 4. 按钮级别权限 ##

跟路由相似，我们在获取用户信息的时候获取当前用户借用的按钮标识码。每一个按钮都有标识。  
将路由存在store中，在对页面按钮进行判断。  
[推荐地址：https://blog.csdn.net/acoolper/article/details/97375142][https_blog.csdn.net_acoolper_article_details_97375142]

## 5. 引入插件（echarts，百度地图） ##

**1.Echarts**

官方文档：https://www.echartsjs.com/examples/zh/index.html

//全部引入
    var echarts = require('echarts')
    
    // 按需引入 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts')
    // 引入柱状图
    require('echarts/lib/chart/bar')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

//使用
     template：
      <div id="barchart1" class="echarts"></div>
      
      js：
        this.barchart1 = echarts.init(document.getElementById('barchart1'));
        this.barchart1.setOption({  配置})

**2.百度地图（vue-baidu-map）**

官方文档：https://dafrok.github.io/vue-baidu-map/\#/zh/start/installation

//安装
     $ npm install vue-baidu-map --save

bgcolor=#000322
     //全局引用
     import BaiduMap from 'vue-baidu-map'
     Vue.use(BaiduMap, {  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
       ak: 'YOUR_APP_KEY'
     })
     
     //引用（建议按需引用）
     import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
     import BmScale from 'vue-baidu-map/components/controls/Scale'
     import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
     import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
     import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
     import BmMarker from 'vue-baidu-map/components/overlays/Marker'
     import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
      
     export default { 
    	 data () { 
    	    return { 
    	      center: { lng: 0, lat: 0},
    	      zoom: 3
    	    }
    	  },
    	 components: {   //注册组件
    	  BaiduMap,
          BmScale,
          BmNavigation,
          BmGeolocation,
          BmMarkerClusterer,
          BmMarker,
          BmInfoWindow,
    	 }，
    	 methods: { 
        	handler ({ BMap, map}) { 
          		console.log(BMap, map)
          		this.center.lng = 116.404
         		this.center.lat = 39.915
          		this.zoom = 15
       		 }
     	 }
     }

//组件使用使用
    <baidu-map :center="center" :zoom="zoom" @ready="handler" ak="开发密钥" scroll-wheel-zoom="true">
    	
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
    </baidu-map>

**注意:**  
1.BaiduMap 组件容器本身是一个空的块级元素，必须定义高度。  
2.没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。  
3.在组件的 ready 事件执行地图 API 加载完毕后才能执行的代码，不要在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

## 6. 环境变量 ##

主要用于不同环境下公共变量的配置，比如接口路径，下载文件地址等  
admin这个框架默认就是cli3。以下扩展一下cli2的方法  
**1. 环境变量**

*  **Cli2:**  
    首先需要安装： `cnpm i -D cross-env`或`npm i -D cross-env`  
    然后配置不同打包指令变量值：在prod.env.js中：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center]  
    配置打包的指令：在package.json中：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 1]  
    这样使用 npm run build:test则对应变量是test的变量值。 npm run build为默认设置的变量值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 2]
 *  **Cli3:**  
    添加不同模式的环境文件：
    
        .env                # 在所有的环境中被载入
        .env.[mode]         # 只在指定的模式中被载入。如.env.staging文件
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 3]  
    .env后的模式将用于package.json中打包指令所指向的模式文件。development模式是用于本地开发![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]  
    环境变量必须以VUE\_APP\_为开头。
    
        创建变量：VUE_APP_WEBPACK_PATH='ws://XXX.com/socketServer.do'
         获取：console.log(process.env.VUE_APP_WEBPACK_PATH)

**项目中有两个特殊变量：**

NODE_ENV - 是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
    BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]: /images/20211006/ce7862ea28684837a60c7fdd84c57e9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]: /images/20211006/8f4e7c13c5c74150ad3b8c1f3cbab57d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]: /images/20211006/0dde7e93f2a1417ea30c5b10d319a1d9.png
[20191101172019147.png]: /images/20211006/06e3b7323a554909b0d5c5c26e168b1c.png
[https_blog.csdn.net_acoolper_article_details_97375142]: https://blog.csdn.net/acoolper/article/details/97375142
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20211006/aa8ee87d2d574272b7d045fa362f771f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20211006/526d787dfab74444b8fef801f1004e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20211006/768ebe634c0c47ce89eb86ed21fdeda8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20211006/6ed67ab8bb4248978a96a020aa874f80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]: /images/20211006/55f74ef224074ca6b6233f6a96bed610.png