接觸el-admin

菜雞兒發表於2020-11-08

使用vue-element-admin 寫使用者管理端

  • 框架github地址

https://www.bilibili.com/video/av19235761?from=search&seid=14657848923029564329

最近公司接到的專案裡面需要快速開發，選了GitHub上面star相當多的一個vue管理後臺，用了一下，感覺相當的不錯，比我自己做的管理端真的不是差一丁半點（尷尬狀！），這個題外，這個後臺確實很方便，該有基本都有了，許可權管理，各種表格，各種元件都是開箱即用。感覺非常成熟，值得深度學習。

1、專案初始化

專案的提供了非常簡潔的模板和一個整合所有元件的demo
可以分別clone下來進行分開執行進行對照開發
初始化方法我從官方copy下來

整合模板下載 vue-element-admin

# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# install dependency
npm install

# develop
npm run dev

基礎模板下載 vueAdmin-template

  •  

2、專案許可權問題和路由頁面問題

這次開發的專案比較小，沒有許可權管理，使用的cookie,session儲存驗證資訊，我把許可權管理的檔案全部註釋掉了。其他類似登入過期的時候都自己使用程式碼來實現跳轉。

路由的頁面這裡和平時vue-cli腳手架的架構的專案不太一樣。它的路由頁面設定在route資料夾裡面的index檔案。

在這裡就可以設定了路由的頁面路徑，和路徑名稱，

 {
   path: '/',//路由的父級路徑，就是位址列上面後面的尾綴
   component: Layout,//所在頁面元件，這個可以填預設，layout是外部的框架，就像frame層吧。
   redirect: '/person/index',//可選，是否重定向
   name: 'person',//路由名稱
   hidden: true,//這個屬性就不太清楚，晚點我再看看吧
   children: [{
     path: 'index',這裡的是子元件的路徑，是跟在父元件後面的尾綴
     component: () => import('@/views/table/index')這個是/person/index所訪問的路由頁面路徑，在這裡設定你的路由頁面路徑，
   }]
 },

3、頁面的具體操作

其實按照他模板的具體模板程式碼就能知道具體怎麼使用，跟普通的vue的專案是一樣的，使用的element UI ，具體的各個元件按照他那個整合的管理端的各個元件或者直接檢視element ui的框架的API，可以快速上手。
因為element UI本身也是為管理端打造的，所以並不相容手機端。專案從構建到專案完成兩天時間就做完了，相當的快速。以後想偷懶估計都用這個框架了。

相關文章