在從零學習vue之簡單演練——構建單頁面項目中，我對vue腳手架的架構做了一個很簡單的分析。
在這篇文章中，將會深入學習vue架構和webpack和服務端的配置問題。
主要參考了官方文檔，這里對官方文檔進行了說明以及翻譯。
1.項目架構
build/
存儲了開發服務器的配置（node）、生成webpack配置文件，通常情況下不需要改變這些文件，除非需要自己定制Webpack loaders，在這種情況下可以看/webpack.base.conf.js
config/index.js
這是主要的配置文件，提供最常用的構建配置接口。
src/
這里是項目代碼主要存儲的地方，這里的結構目錄主要取決于開發者。
static/
這個目錄是用于存儲靜態資源，放在這里的文件不會被webpack打包。他們會被原封不動地復制到webpack構建出來的對應相同目錄下。
test/unit
包含單元測試相關文件。
test/e2e
包含e2e測試相關文件。
index.html
這是單頁面項目的模板index.html，在開發構建過程中，webpack會生成assets資源，對應的URL會自動插入至這個模板中并渲染。
package.json
NPM配置元文件，包含構建依賴、選項參數等。
2.構建命令
所有的構建命令都是通過NPM Scripts實現的。
npm run dev
（開啟一個Node.js開發服務器）
- Webpack + vue-loader對于單頁面組件.
- 保持熱加載狀態
- 保持編譯錯誤重疊狀態
- ESLint
- SourceMaps
npm run build
（構建assets資源用于生產）
- 使用UglifyJS壓縮JS
- html-minifier壓縮HTML
- 所有組件內的CSS壓縮成單個文件并使用cssnano壓縮
- 所有為保存長期緩存而包含版本哈希號編譯的靜態assets資源，以及自動集成這些資源URL的index.html
npm run unit
（使用Karma運行單元測試）
- 支持ES2015+
- 支持所有的webpack loaders
- 簡單的mock inkection
npm run e2e
（使用Nightwatch運行端到端測試）
3.Linter配置
使用ESlint作為linter，采用標準預設置，并做了一些小的定制化。
如果你不喜歡默認的linting規則，可以有幾種選擇：
- 在.selintrc.js中重寫個人規則。例如，你可以新增一下規則強制使用分號而不是忽略他們：
"semi": [2, "always"] - 集成項目時，選擇一個不同的ESlint預設值。
- 集成項目時，選擇"none"作為ESLint預設值，這樣自己定義規則。
4.預處理器
可采用現在非常流行的幾種預處理器：LESS、SASS、Stylus和PostCSS。如果采用預處理器，所要做的就是安裝合適的webpack loader。例如，采用SASS：
npm install sass-loader node-sass --save-dev
注意需要安裝node-sass因為sass-loader是依賴于它的。
在組件中使用預處理器
一旦安裝了，你就可以在*.vue組件中使用預處理器了，所做的只需要在<style>標簽中添加lang屬性：
<style lang="scss">
/* write SASS! */
</style>
SASS語法說明
- lang="scss"代表CSS-superset語法（使用大括號和分號）
- lang="sass"代表縮緊格式語法
PostCSS
*.vue文件中的樣式默認傳入PostCSS中的，因此不需要使用一個特定的loader。可以簡單增加你所想使用的PostCSS插件在下列位置：
// build/webpack.base.conf.js
module.exports = {
// ...
vue: {
postcss: [/* your plugins */]
}
}
獨立的CSS文件
為了確保可靠的提取和處理，建議在App.vue中引用全局、獨立的文件。例如：
<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>
你可能僅僅應該針對你自己編寫的樣式來做如上處理。對于那些現有的庫，例如Bootstrap或者Semanic UI，你可以把他們放置在/static下，然直接在index.html中引入。這避免額外的構建時間，也可以更好地被瀏覽器緩存。
5.處理靜態Assets資源
你可能注意到了項目結構中有兩個靜態assets資源：src/assets和static/，這兩者有什么區別呢？
Webpacked Assets
為了回答這個問題，我們需要先理解Webpack是怎樣處理static assets的。在*.vue組件中，所有模板templates和CSS是通過vue-html-loader和css-loader解析的并找到對應assets URL的。例如，在background: url(./logo.png)，"./logo.png"是一個相對的assets路徑，會被webpack作為模塊依賴進行重定向。
因為logo.png不是JavaScript，當作為一個模塊依賴時，我們需要使用url-loader和file-loader來處理。樣板項目中已經配置了這些loaders，因此諸如fingerprinting文件命名法和滿足條件下的base64等基本的功能在相對路徑下都可以使用，而不必擔心配置問題。
由于這些assets可能會在構建過程中被inlined/copied/renamed，他們作為你的源代碼中的必要的一部分。這就是為什么建議要將會被webpack處理的assets放置于/src，以區分其他源文件。實際上，你甚至沒有必要把他們放在/src/assets中，你可以口模塊/組件組織并使用他們。例如，你可以把每個組件放在它單獨的目錄下，包含它自己的靜態assets文件。
Asset重定向規則
- 相對URL，如./assets/logo.png會被解釋成一個模塊依賴。他們會被替換為一個自動生成URL，依據你的Webpack輸出配置。
- 無前綴URL，如assets/logo.png ，與./assets/logo.png相同
- 以~為前綴的URL 會被作為模塊請求對待，類似于require('somemodule/image.png)，如果想利用webpack的模塊重定向配置，你需要使用這個前綴。例如你擁有一個assets重定向別名，你需要使用~assets/logo.png來確保別名被接受。
- 根路徑相對URL，例如/assets/logo.png 不會被做任何處理。
在JS中獲取Assets路徑
為Webpack返回正確的asset路徑，你需要使用equire('./relative/path/to/file.jpg')，這將會被file-loader處理，并返回重定向URL，例如
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
注意以上的例子將會包含./bgs/下的每一個圖片。因為Webpack無法猜測他們中的哪一個是在使用中的，因此會包含所有。
"Real" Static Assets
相比較而言，static/下的文件不會被Webpack處理。他們直接拷貝至最終目錄，包括相同的文件名。你引用這些文件必須使用絕對路徑，在config.js中的build.assetsPublicPath、build.assetsSubDirectory。
以下有個例子：
// config.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
static/目錄下的每一個文件被引用時，必須采用絕對URL /static/[filename]，如果你更改了assetSubDirectory為assets，那么這些URL需要更改為assets/[filename]。
6.環境變量
有時候根據項目所處環境配置不同變量是很使用的。
例子：
// config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
DEBUG_MODE: false,
API_KEY: '"..."' // this is shared between all environments
}
// config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})
// config/test.env.js
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
注意：string變量需要被單引號和雙引號包裹'"..."'
因此，環境變量是：
- Production
- NODE_ENV = 'production',
- DEBUG_MODE = false,
- API_KEY = '...'
- Development
- NODE_ENV = 'development',
- DEBUG_MODE = true,
- API_KEY = '...'
- Testing
- NODE_ENV = 'testing',
- DEBUG_MODE = true,
- API_KEY = '...'
使用
使用環境變量很簡單，如：
Vue.config.debug = process.env.DEBUG_MODE
7.與后端框架集成
如果你在構建純靜態app（與后端部署分離），那么你可能不需要編輯config/index.js。但是如果你想與一個已經存在的后端框架集成這個模板，例如Rails/Django/Laravel，使用他們自己的工程框架，那么你可以編輯config/index.js來生成front-end assets到后端工程。
（這一章及以后的代理、測試等章節，我尚且沒有用到，暫時不做翻譯了就~偷個懶先）
