by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-9.html
本文可全文轉載腰池，但需要保留原作者和出處厉斟。
有了前面幾篇文章的鋪墊弯蚜，我相信我們回過頭來再看看用 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
執(zhí)行完成后，當前目錄下就會生成命名為 vue-pro-demo 的項目文件夾昏名，結構如下：
.
├── README.md # 項目說明文件
├── build # 存放webpack 構建文件
├── config # 存放webpack 配置文件
├── index.html # 項目html模板文件
├── package.json # 存儲項目包依賴涮雷，以及項目配置信息
├── src # 開發(fā)文件夾，一般業(yè)務代碼都在這里寫
└── static # 項目靜態(tài)資源文件夾
4 directories, 4 files
對于 src 目錄轻局，我們在開發(fā)中也會根據文件的功能進行文件夾拆分洪鸭，比如我個人比較喜歡的結構如下（僅供參考）：
.
├── App.vue # 項目如何組件
├── api # 存放接口相關文件
├── assets # 存放項目資源文件，比如圖片
├── components # 存放通用組件
├── directive # 存放全局自定義指令
├── filters # 存放全局過濾器
├── main.js # 項目入口文件
├── mock # mock數據
├── router # 路由
├── store # 狀態(tài)管理
├── styles # 樣式文件
├── utils # 存放工具函數
└── views # 存放視圖類組件
規(guī)范的目錄結構可以很好的規(guī)范化你的開發(fā)習慣仑扑，代碼分工明確览爵，便于維護，當你把鍋甩給別人時镇饮，別人也不至于太難受蜓竹，這個體會我想大家都懂的，臟話不宜說太多o(╯□╰)o盒让。
定制開發(fā)項目模板
每個人在使用官方項目模板開發(fā)項目的時候，都或多或少的會修改一些默認的 webpack 配置司蔬，然后添加一些項目經常使用的的插件邑茄，也會根據自己需要在 src 目錄下添加一些通用的文件夾目錄，比如上面所說到的俊啼。
這就存在一個問題肺缕，每次我們在初始化項目的時候，都需要重復完成這幾項操作授帕，作為一個懶癌晚期患者的程序員同木，又怎么能容忍此類事情發(fā)生呢？所以定制化的需求蠢蠢欲動了跛十。
下面就介紹下如何對官方的 webpack模板 進行二次開發(fā)彤路。
二次開發(fā)
要做到這點，只需要三步：
- Fork官方源碼 vuejs-templates/webpack
- 克隆到本地二次開發(fā)芥映，添加自己想要的配置和插件洲尊，并 push 到 github
- 初始化項目時远豺，使用我們自己的倉庫就行
對于步驟1，會使用github的朋友應該都沒問題坞嘀，但是希望你不要問我躯护，復制一個項目為什么叫 fork - 叉子，更不要看成 f**k丽涩。隨便搜索下就明白了棺滞。
接下來，重點介紹下步驟2矢渊。
克隆項目vuejs-templates/webpack到我們的本地后继准，你會發(fā)現目錄結構是這樣的：
.
├── 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 模塊撑螺，步驟如下：
- 在
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"末尾的那個逗號（,）也會被移除线婚，所以你在添加自定義依賴后遏弱，一定要注意當此類情況發(fā)生時，保證初始化后塞弊，你項目的package.json文件格式是否合法有效漱逸。
- 在
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故觅。
總結
第二章有關項目配置篇厂庇，到這里就結束了，希望通過這一章的講解输吏，能夠幫助大家了解到权旷，一個完整的前端項目結構是如何實現的。從最基本的標簽引入開始到工程化的項目架構贯溅，我盡量做到用最傻瓜式的方式來講解拄氯，就是希望即使一個前端新手，也可以很輕松的實現自己工程化的項目配置它浅。重點還是貴在多練習译柏，多總結。
