最近有空所以整理了一下之前的後臺管理專案,覺得有必要分享一些有用的東西:擴充套件性高
、程式碼提示更直觀
、新手更易看懂
的起手專案。10行程式碼一定比100行更易看懂,所以我選擇寫10行的程式碼。
專案描述
參考原版 vue-typescript-admin-template 重寫的一個超輕量的模板(typescript
+element-ui
),只保留了核心功能layout
、vue-router
、svg-icon
、路由許可權管理
。主要是想提供一個專案體積更小、可根據實際情況更自由地擴充套件的一套中後臺管理基礎模板。
部分模組說明
-
http請求
這裡我使用的是根據個人習慣用原生寫的ajax
(參考地址), 可根據自己喜好可以擴充套件axios
這型別第三方庫。 -
vuex
的使用方式我換成了更好的程式碼提示追蹤和更少的程式碼實現方式,參考 你不需要vuex -
layout
特別說明:元件程式碼部分基本重寫、程式碼會比原作者的更少、程式碼提示更直觀、功能效果和原版保持一致。 -
圖表
、富文字編輯
、Excel
等一些擴充套件根據自己專案選擇喜歡的匯入使用,終於不用每次npm run serve
、npm run build
的時候等半天了,我這個快得一匹。
後續 vue-3.0
正式釋出後會繼續更新多一套
專案用到的依賴
{
"dependencies": {
"core-js": "^3.4.4",
"element-ui": "^2.13.0",
"nprogress": "^0.2.0",
"save-dev": "0.0.1-security",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3"
},
"devDependencies": {
"@types/node": "^13.1.4",
"@types/nprogress": "^0.2.0",
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-router": "^4.0.5",
"@vue/cli-plugin-typescript": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"svg-sprite-loader": "^4.1.6",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
},
}
複製程式碼
專案地址
有幫助的話,記得給個star