初識vue-element-admin

My_Oh_My 發布于2019-08-26 10:27 / 2050人閱讀

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

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

創建vue-cli3項目

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

default: 默認
Manually select features 手動（Manually）

選擇配置，看個人項目需求

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

根據項目的選擇配置選擇router 是否為hash 還是history css-processor 預編譯環境配置 eslint一些配置

npm run serve 運行項目

項目根目錄下手動新建一個 vue.config.js，一些基礎的配置可參考鏈接描述

vue-element-admin 代碼

我們在項目中可以通過process.env.NODE_ENV 可以分辨是開發環境（development）生產環境（production）無需設置 npm run serve npm run build 會自動匹配環境
在根目錄下

        新建 .env.development  這個文件設置開發環境變量名
        新建.env.production 這個文件可以設置生產環境變量名
        通過process.env.變量名  拿到這兩個文件的變量名

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()
     }
   })

網絡請求 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)
       }
   )
   ```

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

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

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"] }  //頁面需要的權限
   }]}]

vuex

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

GPU云服務器云服務器 docker初識初識關系數據庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106201.html

vue-element-admin簡化版

pure_admin Project description this is a pure_admin copy from vue-element-admin hahaha! Project url See pure_admin Project setup npm install Compiles and hot-reloads for development npm run serve Comp...

Object 2019-08-23 16:59 評論0 收藏0
vue2+element 管理后臺集成解決方案沒有沒做的，只要想不到的！

摘要：目前的技術棧主要的采用由于是個人項目，所以數據請求都是用了代替。后續會出一系列的教程配套文章，如如何從零構建后臺項目框架，如何做完整的用戶系統如權限驗證，二次登錄等，如何二次開發組件如富文本，如何整合七牛等等文章，各種后臺開發經驗等等。完整項目地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺系列一（基礎篇）系類文章二：手摸手，帶你用vue擼后臺系列二...

sanyang 2019-08-20 16:03 評論0 收藏0
手摸手，帶你用vue擼后臺系列二(登錄權限篇)

摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權限的劃分是不太一致。側邊欄最后一個涉及到權限的地方就是側邊欄，不過在前完整項目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺系列一（基礎篇）手摸手，帶你用vue擼后臺系列二(登錄權限篇) 手摸手，帶你用vue擼后臺系列三 (實戰篇) 手摸手，帶你用vu...

不知名網友 2019-08-20 16:45 評論0 收藏0
vue2模擬vue-element-admin手寫角色權限的實現

　　權限　　路由權限　　靜態路由：固定的路由，沒有權限。如login頁面　　動態路由：根據不同的角色，后端返回不同的路由接口。通過meta中的roles去做篩選　　store存儲路由　　3　　//地址：store/modules/permission　　import{routesasconstantRoutes}from'@/router' 　　　　//根據meta.roles去...

3403771864 2022-09-25 22:04 評論0 收藏0
手摸手，帶你封裝一個vue component

摘要：靈活性和針對性。所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。動手開干接下來我們一起手摸手教改造包裝一個插件，只要幾分鐘就可以封裝一個專屬于你的。項目地址：vue-countTo配套完整后臺demo地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺系列一（基礎篇）系類文章二：手摸手，帶你用vue擼后臺系列二（登錄權限篇）系類文章三：手摸手，帶...

pkhope 2019-08-20 15:48 評論0 收藏0