簡(jiǎn)介：
最近公司項(xiàng)目采用vue搭建了一個(gè)后臺(tái)管理系統(tǒng)掠河，一路上遇到了許多問(wèn)題，都是通過(guò)google來(lái)自己研究解決灯节。在這個(gè)過(guò)程中學(xué)到了許多循头，于是決定把最基礎(chǔ)的部分拿出來(lái)绵估，單獨(dú)做一個(gè)項(xiàng)目，以后再遇到類似的后臺(tái)系統(tǒng)卡骂，直接可以拿過(guò)來(lái)用国裳，免去了一開(kāi)始的搭建環(huán)境、寫(xiě)基礎(chǔ)代碼的麻煩全跨。同時(shí)也想分享出來(lái)躏救，與大家交流交流，各位給提提意見(jiàn)螟蒸，畢竟整個(gè)項(xiàng)目從頭到尾都是自己一個(gè)人搞得盒使，有點(diǎn)閉門(mén)造車(chē)的感覺(jué)，哈哈七嫌。
由于最近有點(diǎn)忙少办，還有一些東西沒(méi)有加上去，后續(xù)會(huì)抽時(shí)間補(bǔ)上诵原，謝謝關(guān)注
如果覺(jué)得還可以的話英妓，麻煩給點(diǎn)個(gè)??，謝謝各位嘍??
github: https://github.com/luichooy/vue-admin.git
技術(shù)棧：
?vue@2.5.2+vue-router@3.0.1+vuex@3.0.0+axios@0.17.0+element-ui@2.0.0+vue-echarts@2.5.1
Build Setup:
# 將項(xiàng)目克隆到本地
git clone https://github.com/luichooy/vue-admin.git
# 進(jìn)入到項(xiàng)目目錄
cd vue-admin
# 安裝依賴
npm install
# 在開(kāi)發(fā)環(huán)境運(yùn)行項(xiàng)目绍赛，并且在瀏覽器打開(kāi) http://localhost:7999
npm run dev
# 項(xiàng)目打包
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run all tests
npm test
目錄結(jié)構(gòu)：
├── build
├── config
├── src
│ ├── assets
│ │ ├── images
│ │ ├── js
| | | ├── addressData.js
│ │ │ ├── localStorage.js
│ │ │ ├── util.js
│ │ └── styles
│ │ │ ├── base.scss
│ │ │ ├── common.scss
│ │ │ ├── iconfont.css
│ │ │ ├── mixin.scss
│ │ │ ├── table.scss
│ │ │ ├── variable.scss
│ ├── components
│ │ ├── card
│ │ ├── filterbar
│ │ └── score
│ │ ├── selfAdd
│ │ ├── tableRadio
│ │ ├── validateCode
│ │ ├── Vmodel
│ ├── data
│ ├── pages
│ │ ├── charts
│ │ ├── error
│ │ ├── form
│ │ └── login
│ │ ├── main
│ │ ├── setting
│ │ ├── tables
│ │ ├── test
│ ├── router
│ │ ├── index.js
│ │ ├── route.js
│ ├── store
│ │ ├── getters.js
│ │ ├── index.js
│ │ ├── mutations.js
│ │ ├── state.js
│ ├── utils
│ ├── utils.js
│ ├── http.js
│ ├── main.js
│ ├── Root.vue
├── static
├── test
├── babelrc
├── eslintignore
├── eslintrc.js
├── .gitignore
├── postcssrc.js
├── index.html
├── package.json
└── readme.md
功能實(shí)現(xiàn)：
- [x] 登陸蔓纠，登出
- [x] 驗(yàn)證碼插件的實(shí)現(xiàn)
- [x] 通過(guò)vuex管理用戶信息和token
- [x] 左側(cè)菜單欄，上方頂部欄
- [x] 利用express完成api開(kāi)發(fā)吗蚌，實(shí)現(xiàn)數(shù)據(jù)mock
- [x] 利用axios設(shè)置請(qǐng)求腿倚，響應(yīng)攔截器，對(duì)http請(qǐng)求進(jìn)行統(tǒng)一管理
- [x] 設(shè)置vue-router的導(dǎo)航守衛(wèi)蚯妇，實(shí)現(xiàn)頁(yè)面訪問(wèn)權(quán)限控制及頁(yè)面跳轉(zhuǎn)loading的同意管理
- [x] 引入vue-echarts,實(shí)現(xiàn)多種柱狀圖/折線圖/餅圖
- [x] 表格-基本表格示例敷燎，該部分會(huì)繼續(xù)擴(kuò)充
- [x] 自由表單渲染及自定義表單元素的實(shí)現(xiàn)
- [x] 測(cè)試部分有自己實(shí)現(xiàn)的各種組件，該部分會(huì)繼續(xù)補(bǔ)充
- [ ] 利用express+mongodb 實(shí)現(xiàn)后臺(tái)
效果預(yù)覽：
login.gif
basic.gif
charts.gif
form.gif
test.gif
