摘要:目前的技術(shù)棧主要的采用由于是個人項目,所以數(shù)據(jù)請求都是用了代替。后續(xù)會出一系列的教程配套文章,如如何從零構(gòu)建后臺項目框架,如何做完整的用戶系統(tǒng)如權(quán)限驗證,二次登錄等,如何二次開發(fā)組件如富文本,如何整合七牛等等文章,各種后臺開發(fā)經(jīng)驗等等。
完整項目地址:vue-element-admin
系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)
系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)
系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)
系類文章四:手摸手,帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎(chǔ)模板)
這半年來一直在用vue寫管理后臺,目前后臺已經(jīng)有七十多個頁面,十幾種權(quán)限,但維護(hù)成本依然很低,效率依然很高,所以準(zhǔn)備開源分享一下后臺開發(fā)的經(jīng)驗和成果。目前的技術(shù)棧主要的采用vue+element+axios.由于是個人項目,所以數(shù)據(jù)請求都是用了mockjs代替。
后續(xù)會出一系列的教程配套文章,如如何從零構(gòu)建后臺項目框架,如何做完整的用戶系統(tǒng)(如權(quán)限驗證,二次登錄等),如何二次開發(fā)組件(如富文本),如何整合七牛等等文章,各種后臺開發(fā)經(jīng)驗等等。莫急~~
功能登錄/注銷
權(quán)限驗證
側(cè)邊欄
面包屑
富文本編輯器
Markdown編輯器
JSON編輯器
列表拖拽
plitPane
Dropzone
Sticky
CountTo
echarts圖表
401,401錯誤頁面
錯誤日志
導(dǎo)出excel
table example
form example
多環(huán)境發(fā)布
dashboard
二次登錄
動態(tài)側(cè)邊欄
mock數(shù)據(jù)
svg iconfont
開發(fā)# 克隆項目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 安裝依賴 npm install # 本地開發(fā) 開啟服務(wù) npm run dev
瀏覽器訪問 http://localhost:9527
發(fā)布# 發(fā)布測試環(huán)境 帶webpack ananalyzer npm run build:sit-preview # 構(gòu)建生成環(huán)境 npm run build:prod目錄結(jié)構(gòu)
├── build // 構(gòu)建相關(guān)?? ├── config // 配置相關(guān) ├── src // 源代碼 │?? ├── api // 所以請求 │?? ├── assets // 主題 字體等靜態(tài)資源 │?? ├── components // 全局公用組件 │?? ├── directive // 全局指令 │?? ├── filtres // 全局filter │?? ├── mock // mock數(shù)據(jù) │?? ├── router // 路由 │?? ├── store // 全局store管理 │?? ├── styles // 全局樣式 │?? ├── utils // 全局公用方法 │?? ├── view // view │?? ├── App.vue // 入口頁面 │?? └── main.js // 入口 加載組件 初始化等 ├── static // 第三方不打包資源 │?? ├── jquery │?? └── Tinymce // 富文本 ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置項 ├── .gitignore // git 忽略項 ├── favicon.ico // favicon圖標(biāo) ├── index.html // html模板 └── package.json // package.json狀態(tài)管理
后臺只有user和app配置相關(guān)狀態(tài)使用vuex存在全局,其它數(shù)據(jù)都由每個業(yè)務(wù)頁面自己管理。
效果圖 兩步驗證登錄 支持微信和qq)
真正的動態(tài)換膚 拖拽排序 上傳裁剪頭像 錯誤統(tǒng)計 富文本(整合七牛 打水印等個性化功能) 更多demo 占坑系類文章一
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/82678.html
摘要:簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板,包含了正常項目開發(fā)所需的框架功能,開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板,包含了正常項目開發(fā)所需的框架功能,開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...
最近嘗試使用vue+element實現(xiàn)增刪改查功能,在實現(xiàn)的過程中遇到了蠻多問題,現(xiàn)在總結(jié)如下:首先安裝相關(guān)的插件1、根據(jù)vue官網(wǎng)推薦,使用axios進(jìn)行前后臺交互,安裝axiosnpm install axios -S2、安裝elementUI,官網(wǎng)npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 3637·2021-11-24 10:22
閱讀 3705·2021-11-22 09:34
閱讀 2510·2021-11-15 11:39
閱讀 1541·2021-10-14 09:42
閱讀 3676·2021-10-08 10:04
閱讀 1570·2019-08-30 15:52
閱讀 863·2019-08-30 13:49
閱讀 3032·2019-08-30 11:21