從零開始搭建VUE項目
前言：
此樣板面向大型，嚴肅的項目，并假定您對Webpack和vue-loader有些熟悉。 請務必閱讀vue-loader的常見工作流配方的文檔。
如果您只想嘗試vue-loader或者鞭打一個快速原型，請改用webpack-simple模板。
快速開始：
要使用這個模板，可以用vue-cli來支持一個項目。 建議使用npm 3+更高效的依賴關系樹：
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
項目構建：
. ├── build/ # webpack配置文件 │ └── ... ├── config/ │ ├── index.js # 主要項目配置 │ └── ... ├── src/ │ ├── main.js # 應用入口文件 │ ├── App.vue # 主應用程序組件 │ ├── components/ # ui組件 │ │ └── ... │ └── assets/ # 模塊資源（由webpack處理） │ └── ... ├── static/ # 純靜態資源（直接復制） ├── test/ │ └── unit/ # 單元測試 │ │ ├── specs/ # 測試spec文件 │ │ ├── index.js # 測試構建條目文件 │ │ └── karma.conf.js # 測試跑步者配置文件 │ └── e2e/ # e2e測試 │ │ ├── specs/ # 測試spec文件 │ │ ├── custom-assertions/ # e2e測試的自定義斷言 │ │ ├── runner.js # 測試跑步腳本 │ │ └── nightwatch.conf.js # 測試跑步者配置文件 ├── .babelrc # babel 配置 ├── .postcssrc.js # postcss 配置 ├── .eslintrc.js # eslint 配置 ├── .editorconfig # editor 配置 ├── index.html # index.html模板 └── package.json # 構建腳本和依賴關系
下面詳細講解下這個項目解構：
build/
此目錄包含開發服務器和生產webpack構建的實際配置。 通常，您不需要觸摸這些文件，除非您要自定義Webpack加載器，在這種情況下，您應該看看build / webpack.base.conf.js。
config/index.js
這是顯示構建設置的一些最常見配置選項的主配置文件。 有關詳細信息，請參閱開發期間的API代理和后端框架集成。
src/
這是你的大部分應用程序代碼所在的位置。如何構建此目錄中的所有內容，主要取決于您; 如果您使用Vuex，您可以查閱Vuex應用程序的建議。
static/
此目錄是您不想使用Webpack進行處理的靜態資源的一個逃生艙口。 它們將直接復制到生成webpack建立資產的同一個目錄中。
有關詳細信息，請參閱處理靜態資產。
test/unit
包含單元測試相關文件。 有關詳細信息，請參閱單元測試
test/e2e
包含e2e測試相關文件。 有關詳細信息，請參閱端到端測試。
index.html
這是我們的單頁應用程序的模板index.html。 在開發和構建期間，Webpack將生成資產，并將生成的資產的URL自動注入到此模板中以呈現最終的HTML。
package.json
包含所有構建依賴項和構建命令的NPM軟件包元文件。
構建命令:
npm run dev
啟動Node.js本地開發服務器。 有關詳細信息，請參閱開發期間的API代理。
.用于單個文件Vue組件的Webpack + vue-loader。
.狀態保存熱重載
.狀態保存編譯錯誤覆蓋
.使用ESLint保存
.源地圖
npm run build
建立資源進行生產。 有關詳細信息，請參閱與后端框架集成。
.用UglifyJS縮小了JavaScript。
.HTML用html-minifier縮小。
.將所有組件的CSS提取到單個文件中，并用cssnano進行縮小。
.使用版本散列編輯的所有靜態資源都可以進行高效的長期緩存，并且生成index.html是自動生成的，具有適當的URL到這些生成的資產。
npm run unit
使用Karma在PhantomJS中進行單元測試。 有關詳細信息，請參閱單元測試
.在測試文件中支持ES2015 +。
.支持所有webpack加載器。
.輕松模擬注射。
npm run e2e
使用Nightwatch進行端到端測試。 有關詳細信息，請參閱端到端測試
.在多個瀏覽器中并行運行測試。
.開箱即用的一個命令：
.硒和chromedriver依賴關系自動處理。
.自動生成Selenium服務器。
Linter配置：
此樣板使用ESLint作為linter，并使用標準預設與一些小的定制。如果您對默認的linting規則不滿意，您可以選擇幾種：
1.覆蓋.eslintrc.js中的各個規則。 例如，您可以添加以下規則來強制執行分號，而不是省略它們：
// .eslintrc.js "semi": [2, "always"]
2.在生成項目時選擇不同的ESLint預設，例如eslint-config-airbnb。
3.在生成項目并定義自己的規則時，為ESLint預設選擇“無”。 有關詳細信息，請參閱ESLint文檔。
預處理器:
此樣板為大多數流行的CSS預處理器（包括LESS，SASS，Stylus和PostCSS）預先配置了CSS提取。 要使用預處理器，您需要做的就是為其安裝適當的webpack加載器。 例如，要使用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管道傳輸，因此您不需要使用特定的加載器。 您可以在vue塊下簡單添加要在build / webpack.base.conf.js中使用的PostCSS插件：
// build/webpack.base.conf.js module.exports = { // ... vue: { postcss: [/* your plugins */] } }
有關詳細信息，請參閱vue-loader's的相關文檔。
Standalone CSS Files:
為了確保一致的提取和處理，建議從您的根App.vue組件導入全局獨立樣式文件，例如：
<!-- App.vue --> <style src="./styles/global.less" lang="less"></style>
請注意，您應該僅為自己為您的應用程序編寫的樣式。 對于現有的圖書館 引導或語義UI，您可以將它們放在/靜態中，并直接在index.html中引用它們。 這避免了額外的構建時間，也更適合瀏覽器緩存。 （見 Static Asset Handling）
處理靜態資產(Static Assets):
您將在項目結構中注意到，靜態資產有兩個目錄：src / assets和static /。 他們有什么區別？
Webpacked資產:
為了回答這個問題，我們首先需要了解Webpack如何處理靜態資產。 在* .vue組件中，所有的模板和CSS都由vue-html-loader和css-loader解析來查找資源URL。 例如，在<img src =“./ logo.png”>和background：url（./ logo.png）中，“./logo.png”是相對的資產路徑，將由Webpack解析為模塊依賴關系。
因為logo.png不是JavaScript，當被視為模塊依賴關系時，我們需要使用url-loader和file-loader來處理它。 此樣板已經為您配置了這些加載程序，因此您可以免費獲得文件名指紋和條件base64內聯等功能，同時可以使用相對/模塊路徑，而不必擔心部署。
由于這些資源可能在構建過程中被內聯/復制/重命名，所以它們基本上是您的源代碼的一部分。 這就是為什么建議將Webpack處理的靜態資產放在/ src中，沿著其他源文件。 實際上，您甚至不必將它們全部放在/ src / assets中：您可以根據使用它們的模塊/組件進行組織。 例如，您可以將每個組件放在自己的目錄中，其靜態資產就在它的旁邊。
資產解決規則:
.相對網址，例如 ./assets/logo.png將被解釋為模塊依賴關系。 它們將被基于Webpack輸出配置的自動生成的URL替換。
.非前綴網址，例如 assets / logo.png將被視為與相對URL相同，并被翻譯成./assets/logo.png。
.前綴為?的URL被視為模塊請求，類似于require（'some-module / image.png'）。 如果要使用Webpack的模塊解析配置，則需要使用此前綴。 例如，如果您有資產的解決別名，則需要使用<img src =“?assets / logo.png”>來確保別名符合要求。
.根相對URL，例如 /assets/logo.png根本沒有被處理。
在JavaScript中獲取資源路徑:
為了使Webpack返回正確的資源路徑，您需要使用require（'./ relative / path / to / file.jpg'），這將由文件加載程序處理，并返回已解析的URL。 例如：
computed: { background () { return require('./bgs/' + this.id + '.jpg') } }
注意上面的例子將包括最終構建中的./bgs/下的每個圖像。 這是因為Webpack無法猜測它們在運行時將被使用，所以它包括它們。
“真實”靜態資產:
相比之下，靜態的文件根本不被Webpack處理：它們直接以相同的文件名復制到最終目的地。 您必須使用絕對路徑引用這些文件，這是通過在config.js中加入build.assetsPublicPath和build.assetsSubDirectory來確定的。
例如，使用以下默認值：
// config/index.js module.exports = { // ... build: { assetsPublicPath: '/', assetsSubDirectory: 'static' } }
使用絕對URL / static / [filename]引用靜態/中的任何文件。 如果將assetSubDirectory更改為資產，則這些URL將需要更改為/ assets / [filename]。
我們將在后端集成部分中詳細了解配置文件。
環境變量:
有時根據應用程序運行的環境具有不同的配置值是很實用的。
舉個例子：
// 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"' })
注意：字符串變量需要被包裝成單引號和雙引號'“...”'
所以環境變量是：
- 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 = '...'
我們可以看到，test.env繼承了dev.env，dev.env繼承了prod.env。
用法：
在代碼中使用環境變量很簡單。 例如：
Vue.config.productionTip = process.env.NODE_ENV === 'production'
與后端框架集成：
如果您正在構建純靜態應用程序（與后端API分開部署的應用程序），則可能甚至不需要編輯config / index.js。 但是，如果要將此模板與現有的后端框架集成，例如 Rails / Django / Laravel擁有自己的項目結構，您可以編輯config / index.js，將前端資源直接生成到后臺項目中。
我們來看看默認的config / index.js：
// config/index.js var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true }, dev: { port: 8080, proxyTable: {} } }
在構建部分中，我們有以下選項：
build.index
必須是本地文件系統上的絕對路徑。
如果您使用帶有后端框架的此模板，則可以相應地編輯index.html，并將此路徑指向由您的后端應用程序呈現的視圖文件，例如。 Rails應用的app / views / layouts / application.html.erb或Laravel應用程序的resources / views / index.blade.php。
build.assetsRoot
必須是本地文件系統上的絕對路徑。
這應該指向包含應用程序的所有靜態資源的根目錄。 例如，公開/為Rails / Laravel。
build.assetsSubDirectory
在build.assetsRoot中的此目錄下嵌入webpack生成的資源，以便它們與build.assetsRoot中可能具有的其他文件不混合。 例如，如果build.assetsRoot是/ path / to / dist，并且build.assetsSubDirectory是靜態的，則所有Webpack資源都將以path / to / dist / static生成。
此目錄將在每次構建之前進行清理，因此只應包含生成生成的資源。
靜態中的文件將在構建期間按原樣復制到該目錄中。 這意味著如果您更改此前綴，則所有絕對URL引用static /中的文件也將需要更改。 有關詳細信息，請參閱 Handling Static Assets。
build.assetsPublicPath
這應該是您的build.assetsRoot將通過HTTP提供的URL路徑。 在大多數情況下，這將是根（/）。 只有當您的后端框架提供具有路徑前綴的靜態資產時，才能更改此選項。 在內部，這是作為output.publicPath傳遞給Webpack。
build.productionSourceMap
是否生成源地圖進行生產構建。
dev.port
指定要監聽的服務器的端口。
dev.proxyTable
定義開發人員服務器的代理規則。 有關詳細信息，請參閱 API Proxying During Development。
開發期間的API代理：
當將此樣板與現有后端集成時，通常需要在使用dev服務器時訪問后端API。 為了實現這一點，我們可以并行（或遠程）運行dev服務器和API后端，并讓dev服務器將所有API請求代理到實際的后端。
要配置代理規則，請在config / index.js中編輯dev.proxyTable選項。 dev服務器正在使用http代理中間件進行代理，因此您應參考其文檔以獲取詳細的用法。 但這是一個簡單的例子：
// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
以上示例將代理請求/ api / posts / 1 到 http://jsonplaceholder.typicode.com/posts/1.
網址匹配：
除了靜態網址之外，您還可以使用glob模式來匹配網址，例如/ API/ **。 有關詳細信息，請參閱上下文匹配。 此外，您可以提供一個過濾器選項，該選項可以是自定義函數，用于確定請求是否應被代理：
proxyTable: { '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' } } }
單元測試：
本樣板用于單元測試的工具概述：
.Karma：啟動瀏覽器的測試運行器，運行測試并將結果報告給我們。
.karma-webpack：使用Webpack捆綁我們的測試的Karma插件。
.摩卡：我們編寫測試規范的測試框架。
.Chai：提供更好的斷言語法的測試斷言庫。
.Sinon：提供間諜，存根和模擬的測試實用程序庫。
Chai和Sinon是使用karma-sinon-chai進行集成的，所以所有Chai接口（應該是，期望，斷言）和sinon都可以在測試文件中全球使用。
和文件：
index.js
這是由karma-webpack用于捆綁所有測試代碼和源代碼（為了覆蓋目的））的條目文件。 你可以忽略它大部分。
specs/
該目錄是您編寫實際測試的地方。 您可以在測試中使用完整的ES2015 +和所有受支持的Webpack加載器。
karma.conf.js
這是Karma配置文件。 有關詳細信息，請參閱Karma docs 。
在更多瀏覽器中運行測試
您可以在多個真正的瀏覽器中運行測試，方法是在test / unit / karma.conf.js中安裝更多的業務發射器并調整瀏覽器字段。
模擬依賴
默認情況下，此樣板安裝了注入裝載機。 有關* .vue組件的使用，請參閱vue-loader文檔進行測試。
端到端測試：
此樣板使用Nightwatch.js進行e2e測試。 Nightwatch.js是一個高度集成的e2e測試賽跑者，構建在硒上。 這個樣板附帶了Selenium服務器和Chromedriver二進制文件，為您預配置，所以你不必搞砸自己。
我們來看看test / e2e目錄中的文件：
runner.js
啟動開發服務器的Node.js腳本，然后啟動Nightwatch以對其執行測試。 這是運行npm運行e2e時運行的腳本。
nightwatch.conf.js
夜視配置文件。 有關詳細信息，請參閱Nightwatch的配置文檔。
custom-assertions/
可以在夜視測試中使用的自定義斷言。 有關詳細信息，請參閱Nightwatch的文檔編寫自定義聲明。
specs/
你的實際測試！ 有關詳細信息，請參閱Nightwatch的文檔測試和API參考。
在更多瀏覽器中運行測試
要配置哪些瀏覽器運行測試，請在test / e2e / nightwatch.conf.js中的“test_settings”下添加一個條目，以及test / e2e / runner.js中的--env標志。 如果您希望在諸如SauceLabs之類的服務上配置遠程測試，您可以根據環境變量使Nightwatch配置有條件，或者完全使用單獨的配置文件。 有關更多詳細信息，請參閱Nightwatch在Selenium上的文檔。
預售SEO
如果您希望預先投放一旦推送到生產時不會顯著更改的路線，請使用此Webpack插件：prerender-spa-plugin，它已經過Vue測試。 對于頻繁更改的頁面，Prerender.io和Netlify都提供定期重新預覽您的搜索引擎內容的計劃。
使用prerender-spa-plugin
將其安裝為開發人員依賴關系：
npm install --save-dev prerender-spa-plugin
需要在build / webpack.prod.conf.js中：
// 該行應該位于其他“進口”生活的文件的頂部 var PrerenderSpaPlugin = require('prerender-spa-plugin')
在plugins數組中（也在build / webpack.prod.conf.js中）進行配置：
new PrerenderSpaPlugin( // Path to compiled app path.join(__dirname, '../dist'), // List of endpoints you wish to prerender [ '/' ] )
如果您還想預先投射/關于和/接觸，那么該數組將是['/'，'/ about'，'/ contact']。
啟用vue-router的歷史記錄模式：
const router = new VueRouter({ mode: 'history', routes: [...] })
浙公網安備 33010602011771號