你也許不知道的Vuejs - 定製開發專案模板

yugasun發表於2018-03-22
VueJS

by yugasun from yugasun.com/post/you-ma… 本文可全文轉載，但需要保留原作者和出處。

有了前面幾篇文章的鋪墊，我相信我們回過頭來再看看用 vue-cli 腳手架工具初始化的專案，就很好理解了。本篇將帶著大家全面認識下用 vue-cli 腳手架工具初始化的專案，並會講解如何定製化自己的專案模板。

初始化專案

先全域性安裝 vue-cli 腳手架工具：

npm install -g vue-cli
複製程式碼

安裝完成後，初始化基於 webpack 的專案模板，按照指示依次填寫專案資訊和選擇需要的模組：

$ vue init webpack vue-pro-demo

? Project name vue-pro-demo
? Project description A Vue.js project
? Author yugasun <yuga_sun@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-pro-demo".


# Installing project dependencies ...
# ========================
...

# Project initialization finished!
# ========================

To get started:

  cd vue-pro-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
複製程式碼

執行完成後，當前目錄下就會生成命名為 vue-pro-demo 的專案資料夾，結構如下：

.
├── README.md           # 專案說明檔案
├── build               # 存放webpack 構建檔案
├── config              # 存放webpack 配置檔案
├── index.html          # 專案html模板檔案
├── package.json        # 儲存專案包依賴，以及專案配置資訊
├── src                 # 開發資料夾，一般業務程式碼都在這裡寫
└── static              # 專案靜態資原始檔夾

4 directories, 4 files
複製程式碼

對於 src 目錄，我們在開發中也會根據檔案的功能進行資料夾拆分，比如我個人比較喜歡的結構如下（僅供參考）：

.
├── App.vue             # 專案如何元件
├── api                 # 存放介面相關檔案
├── assets              # 存放專案資原始檔，比如圖片
├── components          # 存放通用元件
├── directive           # 存放全域性自定義指令
├── filters             # 存放全域性過濾器
├── main.js             # 專案入口檔案
├── mock                # mock資料
├── router              # 路由
├── store               # 狀態管理
├── styles              # 樣式檔案
├── utils               # 存放工具函式
└── views               # 存放檢視類元件
複製程式碼

規範的目錄結構可以很好的規範化你的開發習慣，程式碼分工明確，便於維護，當你把鍋甩給別人時，別人也不至於太難受，這個體會我想大家都懂的，髒話不宜說太多o(╯□╰)o。

定製開發專案模板

每個人在使用官方專案模板開發專案的時候，都或多或少的會修改一些預設的 webpack 配置，然後新增一些專案經常使用的的外掛，也會根據自己需要在 src 目錄下新增一些通用的資料夾目錄，比如上面所說到的。

這就存在一個問題，每次我們在初始化專案的時候，都需要重複完成這幾項操作，作為一個懶癌晚期患者的程式設計師，又怎麼能容忍此類事情發生呢？所以定製化的需求蠢蠢欲動了。

下面就介紹下如何對官方的 webpack模板 進行二次開發。

二次開發

要做到這點，只需要三步：

  1. Fork官方原始碼 vuejs-templates/webpack
  2. 克隆到本地二次開發，新增自己想要的配置和外掛，並 push 到 github
  3. 初始化專案時，使用我們自己的倉庫就行

對於步驟1，會使用github的朋友應該都沒問題，但是希望你不要問我，複製一個專案為什麼叫 fork - 叉子，更不要看成 f**k。隨便搜尋下就明白了。

接下來，重點介紹下步驟2。

克隆專案vuejs-templates/webpack到我們的本地後，你會發現目錄結構是這樣的：

.
├── LICENSE
├── README.md
├── deploy-docs.sh
├── docs
├── meta.js
├── package-lock.json
├── package.json
├── scenarios
├── template
└── utils
複製程式碼

這裡我們只需要關心 template 目錄就夠了，因為這個目錄存放的就是我們的專案模板。

開啟 template/src/main.js 檔案（專案入口檔案），程式碼如下：

@@#if_eq build "standalone"@@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
@@/if_eq@@
import Vue from 'vue'
import App from './App'
@@#router@@
import router from './router'
@@/router@@

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  @@#router@@
  router,
  @@/router@@
  @@#if_eq build "runtime"@@
  render: h => h(App)
  @@/if_eq@@
  @@#if_eq build "standalone"@@
  components: { App },
  template: '<App/>'
  @@/if_eq@@
})
複製程式碼

由於hexo對含有 handlebars 語法的演示程式碼編譯有問題，所以將花括號進行了修改 { -> @, } -> @，請結合實際原始碼進行閱讀。

其中包含了很多 handlebars 的語法，這裡主要用到了 if 條件判斷語法，也很好理解。

好了，現在開始新增一個 vue-axios-plugin 模組，步驟如下：

  1. 在 template/package.json 的 dependencies 欄位中新增 vue-axios-plugin 依賴：
//....
  "dependencies": {
    "vue-axios-plugin": "@1.2.3",
    "vue": "@2.5.2"@@#router@@,
    "vue-router": "@3.0.1"@@/router@@
  },
//...
複製程式碼

這裡 @@#router@@ 是用來判斷初始化的時候你是否選擇使用 vue-router，如果不選擇，就會根據判斷移除 vue-router 依賴，很好理解吧。但是需要特別注意的就是，這裡"vue": "@2.5.2" 末尾的那個逗號（ , ）也會被移除，所以你在新增自定義依賴後，一定要注意當此類情況發生時，保證初始化後，你專案的 package.json 檔案格式是否合法有效。

  1. 在 template/src/main.js 中新增外掛注入程式碼：
@@#if_eq build "standalone"@@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
@@/if_eq@@
import Vue from 'vue'
import VueAxiosPlugin from 'vue-axios-plugin'
import App from './App'
@@#router@@
import router from './router'
@@/router@@

Vue.use(VueAxiosPlugin)

Vue.config.productionTip = false
// ...
複製程式碼

本地測試使用

好了，這樣我們的自定義元件已經新增完成了，那麼在提交之前，我們還需要先測試下修改後的模板是否有效，執行命令進行初始化：

vue init path/to/webpack-template my-project
複製程式碼

這裡 vue init 的第一個引數 path/to/webpack-template 就是當前修改後的模板路徑，之後還是重複互動式的配置過程，然後執行你的專案就行了。

不出意外地話，你的專案會很順利的 npm run dev 跑起來，之後我們只需要 push 到我們自己的 github 倉庫就行了。

使用

提交以後，專案同事都可以共享這份模板了，用的時候只需要執行以下命令：

vue init yugasun/webpack my-project
複製程式碼

這裡的 yugasun/webpack 引數就是告訴 vue-cli 在初始化的時候到使用者 yugasun 的 github 倉庫下載 webpack 專案模板。

之後你就可以愉快的編寫輸出你的 Hello world 了。

補充說明

當你你足夠熟悉專案模板，你也可以對 webpack 配置進行更個性化的配置，或者新增 vue init 時的互動式命令。感興趣的可以參看下我的個人模板 yugasun/webpack。

總結

第二章有關專案配置篇，到這裡就結束了，希望通過這一章的講解，能夠幫助大家瞭解到，一個完整的前端專案結構是如何實現的。從最基本的標籤引入開始到工程化的專案架構，我儘量做到用最傻瓜式的方式來講解，就是希望即使一個前端新手，也可以很輕鬆的實現自己工程化的專案配置。重點還是貴在多練習，多總結。

原始碼在此

專題目錄

You-May-Not-Know-Vuejs

相關文章