Vue-cli 3.0基礎項目工程模板

時間 2019-12-04

標籤 vue cli 3.0 基礎項目工程模板简体版

原文原文鏈接

技術棧及使用要求

基於Vue全家桶 + axios + typescript + element-ui + scss + webpack4構建的企業級應用項目;

開發時請確保你已瞭解或掌握以上技術要求,而後你就能夠愉快的玩耍了;

重新建項目到設置打包環境

vue create vue-cli3-template
新建 vue.config.js 文件，設置baseUrl: './';更多配置請點擊連接
新建各個環境的文件，例如：.env.development .env.test .env.production
在 package.json 中設置打包命令，例如：build:development build:test build:production，在執行命令的語句中設置 mode 環境，例如：--mode test

關於環境變量的注意事項

環境名應該與環境文件統一
環境文件放置根目錄下
關於打包配置路徑,請修改vue.config.js文件下的輸出地址
除了 baseUrl 和 NODE_ENV 其餘環境變量使用 VUE_APP 開頭
另外還設定本地運行環境local,你能夠在項目拉取下來後補充 .env.development.local 文件,並添加以下信息並替換你本身所在服務器的域名及端口;

例如 : NODE_ENV='development' VUE_APP_URL='http://localhost:8080'css

vue 文件中 TS 上下文順序

- data
- @Prop
- @State
- @Getter
- @Action
- @Mutation
- @Watch
- 生命週期鉤子
    - beforeCreate（按照生命週期鉤子從上到下）
    - created
    - beforeMount
    - mounted
    - beforeUpdate
    - updated
    - activated
    - deactivated
    - beforeDestroy
    - destroyed
    - errorCaptured（最後一個生命週期鉤子）
- 路由鉤子
    - beforeRouteEnter
    - beforeRouteUpdate
    - beforeRouteLeave
- computed
- methods
- 組件引用，mixins，filters 等放在 @Component 裏面
複製代碼

工程目錄結構

src：項目源碼。開發的時候代碼寫在這裏。
 |--api # 服務層ajax請求服務
 |    |--index # api數據入口文件
 |--assets # 項目靜態資源
 |--axios # axios封裝請求//攔截配置
 |    |--config.ts # axios攔截器配置文件
 |    |--service,ts # axios請求配置文件
 |--components # 項目公共組件庫
 |--router # 項目路由
 |    |--index.ts # 入口及路由初始化
 |    |--filterRouter # 頁面路由文件
 |--store # 基於Vuex的狀態管理模塊
 |    |--index.ts # 入口及store初始化
 |    |--modules # 子模塊的store對象
 |--utils # 公共庫函數
 |--views # 項目應用頁面，根據應用須要，還能夠有子頁面，各子頁面目錄結構和頂級子頁面相似
 |--App.vue # 項目根視圖
 |--main.ts # 項目入口文件

複製代碼

使用

使用命令行

$ git clone git@github.com:Echi1993/vue-cli3-template.git
$ cd vue-cli3-template
$ npm install
$ npm run serve         # 訪問 http://localhost:8080
$ npm run build         # Compiles and minifies for production
$ npm run lint          # Lints and fixes files
$ npm run test:unit     # Run your unit tests
複製代碼