分享一個 vue-admin-template 純淨版

黃景聖發表於2020-01-08

最近有空所以整理了一下之前的後臺管理專案,覺得有必要分享一些有用的東西:擴充套件性高程式碼提示更直觀新手更易看懂的起手專案。10行程式碼一定比100行更易看懂,所以我選擇寫10行的程式碼。

專案描述

參考原版 vue-typescript-admin-template 重寫的一個超輕量的模板(typescript+element-ui),只保留了核心功能layoutvue-routersvg-icon路由許可權管理。主要是想提供一個專案體積更小、可根據實際情況更自由地擴充套件的一套中後臺管理基礎模板。

部分模組說明

  1. http請求 這裡我使用的是根據個人習慣用原生寫的ajax參考地址), 可根據自己喜好可以擴充套件 axios 這型別第三方庫。

  2. vuex 的使用方式我換成了更好的程式碼提示追蹤和更少的程式碼實現方式,參考 你不需要vuex

  3. layout 特別說明:元件程式碼部分基本重寫、程式碼會比原作者的更少、程式碼提示更直觀、功能效果和原版保持一致。

  4. 圖表富文字編輯Excel等一些擴充套件根據自己專案選擇喜歡的匯入使用,終於不用每次npm run servenpm 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"
    },
}
複製程式碼

專案地址

vue-admin

有幫助的話,記得給個star

預覽地址

demo

參考文件(其實看我程式碼註釋就夠了)

原版文件

相關文章