接觸el-admin
使用vue-element-admin 寫使用者管理端
- 框架github地址
https://www.bilibili.com/video/av19235761?from=search&seid=14657848923029564329
最近公司接到的專案裡面需要快速開發,選了GitHub上面star相當多的一個vue管理後臺,用了一下,感覺相當的不錯,比我自己做的管理端真的不是差一丁半點(尷尬狀!),這個題外,這個後臺確實很方便,該有基本都有了,許可權管理,各種表格,各種元件都是開箱即用。感覺非常成熟,值得深度學習。
1、專案初始化
專案的提供了非常簡潔的模板和一個整合所有元件的demo
可以分別clone下來進行分開執行進行對照開發
初始化方法我從官方copy下來
# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# install dependency
npm install
# develop
npm run dev
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本身也是為管理端打造的,所以並不相容手機端。專案從構建到專案完成兩天時間就做完了,相當的快速。以後想偷懶估計都用這個框架了。
相關文章
- 接觸postgresqlSQL
- MVVM初接觸MVVM
- WebSocket初接觸Web
- 初次接觸 CookieCookie
- SCSS初接觸CSS
- 初次接觸express框架Express框架
- 一、初次接觸javaJava
- ITextSharp 初次接觸
- iris 的 websocket 初始接觸Web
- MyBatis TypeHandler的初次接觸MyBatis
- 再次接觸物件導向物件
- 剛接觸JAVA 問問Java
- 再次接觸tts的特性TTS
- PL/SQL程式設計接觸SQL程式設計
- MicrosoftSecurityEssentials測試版全接觸ROS
- docker 及 linux 初接觸DockerLinux
- html5全接觸(一)HTML
- 分頁查詢初接觸
- 全面接觸SQL語法(轉)SQL
- 新手接觸spring第一課Spring
- Oracle資料庫之初步接觸Oracle資料庫
- ibm cdc 軟體初步接觸IBM
- linux 啟動全接觸(轉)Linux
- vue瞭解與初步接觸/使用Vue
- Kotlin第一次接觸Kotlin
- 接觸GitHub的第一次Github
- XML相關知識全接觸(一)XML
- IT質量我保障——IT測試全接觸
- 托盤程式設計全接觸(轉)程式設計
- 托盤程式設計全接觸 (轉)程式設計
- 入侵檢測術語全接觸(轉)
- 初次接觸 Laravel,先從下載開始Laravel
- Golang學習筆記(十九):Channel初步接觸Golang筆記
- Omi 入坑指南 The second floor 初步接觸
- 從Oclint開始接觸Clang編譯編譯
- 初次接觸React Native遇到的問題React Native
- 動態生成select選項全接觸
- 產品經理工作的初級接觸