初識(shí)vue-element-admin

My_Oh_My 發(fā)布于2019-08-26 10:27 / 2075人閱讀

摘要：最近看了一下項(xiàng)目，它是基于創(chuàng)建的項(xiàng)目創(chuàng)建項(xiàng)目安裝默認(rèn)手動(dòng)選擇配置，看個(gè)人項(xiàng)目需求支持使用書寫源碼支持。支持代碼風(fēng)格檢查和格式化。權(quán)限驗(yàn)證那里也做了遞歸的處理不顯示在菜單欄。組件內(nèi)的在組件內(nèi)使用可以拿到

最近看了一下vue-element-admin項(xiàng)目，它是基于vue-cli3創(chuàng)建的項(xiàng)目

創(chuàng)建vue-cli3項(xiàng)目

安裝vue-cli npm install -g @vue/cli vue create project

default: 默認(rèn)
Manually select features 手動(dòng)（Manually）

選擇配置，看個(gè)人項(xiàng)目需求

TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

根據(jù)項(xiàng)目的選擇配置選擇router 是否為hash 還是history css-processor 預(yù)編譯環(huán)境配置 eslint一些配置

npm run serve 運(yùn)行項(xiàng)目

項(xiàng)目根目錄下手動(dòng)新建一個(gè) vue.config.js，一些基礎(chǔ)的配置可參考鏈接描述

vue-element-admin 代碼

我們?cè)陧?xiàng)目中可以通過process.env.NODE_ENV 可以分辨是開發(fā)環(huán)境（development）生產(chǎn)環(huán)境（production）無需設(shè)置 npm run serve npm run build 會(huì)自動(dòng)匹配環(huán)境
在根目錄下

        新建 .env.development  這個(gè)文件設(shè)置開發(fā)環(huán)境變量名
        新建.env.production 這個(gè)文件可以設(shè)置生產(chǎn)環(huán)境變量名
        通過process.env.變量名  拿到這兩個(gè)文件的變量名

main.js

   項(xiàng)目的入口 
   攔截路由的功能 檢測用戶是否登錄，用戶沒有登錄跳轉(zhuǎn)到登錄頁面

   // 白名單 無需登錄的頁面
   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()
     }
   })

網(wǎng)絡(luò)請(qǐng)求 request.js

   封裝axios 


   ```
   const ajax = axios.create({
       baseURL: process.env.VUE_APP_BASE_URL, //在.env.development  .env.production 獲取base_url
       timeout: 10000
   })
   // 設(shè)置請(qǐng)求攔截器
   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)
   })
   // 返回?cái)r截器
   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)
       }
   )
   ```

Layout 組件 (所有路由的組件都是layout)

   菜單欄 根據(jù) router.js 配置的路由并且根據(jù)權(quán)限動(dòng)態(tài)生成的，同時(shí)使用了遞歸組件，不管你路由多少級(jí)嵌套。權(quán)限驗(yàn)證那里也做了遞歸的處理(hidden: true 不顯示在菜單欄)。
   頁面 ：通過 通過this.$router.path 獲取路由顯示主頁面

route.js

   // 異步加載路由 在meta字段設(shè): 設(shè)置該頁面的訪問權(quán)限
   export const asyncRouterMap = [{
   path: "/permission",
   component: Layout,
   name: "測試權(quán)限",
   meta: { role: ["admin","editor"] }, //頁面需要的權(quán)限
   children: [
   { 
     path: "index",
     component:Test,
     name: "權(quán)限測試頁",
     meta: { role: ["admin","editor"] }  //頁面需要的權(quán)限
   }]}]

vuex

   module：可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
   export default new Vuex.Store({
       modules: {
           // 組件內(nèi)的 store
       }
   })
   在組件內(nèi) 使用 computed：{
       ...mapGetters([
       ])
   }可以拿到 state