收藏一款輕量級、簡單易用、結構清晰的 Vue CLI3 + TypeScript + ElementUI 開發的企業級後臺模板。

Vue-typescript-element-template
Git倉庫地址：
https://github.com/forijk/vue-typescript-element-template.git

Vue-typescript-element-template

一款輕量級、簡單易用、結構清晰的 Vue CLI3 + TypeScript + ElementUI 開發的企業級後臺模板。

近期更新

• 增長 axios 插件的封裝，防抖、節流、請求緩存等。
• 增長一些示例頁面

使用方法及特色

• 使用方法
  • git clone https://github.com/forijk/vue-typescript-element-template.git
  • 安裝依賴: npm install
  • 本地運行: npm run serve
  • 代碼Lint: npm run lint
  • 本地構建: npm run build
• 特色：
  • 多入口項目；也改爲單入口，直接修改 vue.config.js 便可
  • 採用 ESLint 做爲代碼規範工具，內置對 typescript 語法的支持
  • 文件目錄結構清晰
    • pages 項目目錄
    • 工具類 utils
    • 插件類 plugins
    • 公共組件 components
  • 已對 router、store 進行了簡單的配置，拿來即用
  • 集成三級菜單、麪包屑功能等功能
  • 已抽離公共組建 Layout、Header、Side、Breadcrumb 等組件，簡單易用，便於擴展

目錄結構

├── babel.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   ├── logo.png
│   │   └── page404.png
│   ├── common
│   │   ├── Bus.ts
│   │   ├── axios.ts
│   │   ├── axiosExtensions.ts
│   │   ├── common.scss
│   │   └── interpators.ts
│   ├── components
│   │   ├── Breadcrumb.vue
│   │   ├── Header.vue
│   │   ├── Layout.vue
│   │   └── Side.vue
│   ├── global.d.ts
│   ├── pages
│   │   ├── home
│   │   │   ├── App.vue
│   │   │   └── main.ts
│   │   ├── index
│   │   │   ├── App.vue
│   │   │   ├── main.ts
│   │   │   ├── router.ts
│   │   │   ├── service
│   │   │   │   ├── apiMap.ts
│   │   │   │   └── apimanage.serve.ts
│   │   │   ├── store
│   │   │   │   ├── actions.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── mutation-types.ts
│   │   │   │   └── state.ts
│   │   │   └── views
│   │   └── initialize.ts
│   ├── plugins
│   │   ├── inject.ts
│   │   ├── notify.ts
│   │   └── vue.d.ts
│   └── utils
├── tsconfig.json
└── vue.config.js

後續將持續更新。但願可以幫助到你們，有所收穫，也但願你們多多提些建議。

感謝 ~