你也許不知道的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 文件格式是否合法有效。

2. 在 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