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