【課題】從零開始搭建vue項目
初始化項目：
$ 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 # 構建腳本和依賴關係php
下面詳細講解下這個項目解構：
- build/
此目錄包含開發服務器和生產webpack構建的實際配置。 一般，您不須要觸摸這些文件，除非您要自定義Webpack加載器，在這種狀況下，您應該看看build / webpack.base.conf.js。css
- config/index.js
這是顯示構建設置的一些最多見配置選項的主配置文件。 有關詳細信息，請參閱開發期間的API代理和後端框架集成。html
- src/
這是你的大部分應用程序代碼所在的位置。如何構建此目錄中的全部內容，主要取決於您; 若是您使用Vuex，您能夠查閱Vuex應用程序的建議。前端
static/vue
此目錄是您不想使用Webpack進行處理的靜態資源的一個逃生艙口。 它們將直接複製到生成webpack創建資產的同一個目錄中。node
有關詳細信息，請參閱處理靜態資產。
- test/unit
包含單元測試相關文件。 有關詳細信息，請參閱單元測試webpack
- test/e2e
包含e2e測試相關文件。 有關詳細信息，請參閱端到端測試。web
index.htmlvue-router
這是咱們的單頁應用程序的模板index.html。 在開發和構建期間，Webpack將生成資產，並將生成的資產的URL自動注入到此模板中以呈現最終的HTML。chrome
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="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：
<div class="se-preview-section-delimiter"></div>
複製代碼
// 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: {}
}
}
<div class="se-preview-section-delimiter"></div>
#### 在構建部分中，咱們有如下選項：
- 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。
<div class="se-preview-section-delimiter"></div>
#### 開發期間的API代理：
當將此樣板與現有後端集成時，一般須要在使用dev服務器時訪問後端API。 爲了實現這一點，咱們能夠並行（或遠程）運行dev服務器和API後端，並讓dev服務器將全部API請求代理到實際的後端。
要配置代理規則，請在config / index.js中編輯dev.proxyTable選項。 dev服務器正在使用http代理中間件進行代理，所以您應參考其文檔以獲取詳細的用法。 但這是一個簡單的例子：
<div class="se-preview-section-delimiter"></div>
複製代碼
// config/index.js
module.exports = {
// …
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
‘/api’: {
target: ‘jsonplaceholder.typicode.com‘,
changeOrigin: true,
pathRewrite: {
‘^/api’: 」
}
}
}
}
}
以上示例將代理請求/ api / posts / 1 到 http://jsonplaceholder.typicode.com/posts/1.
<div class="se-preview-section-delimiter"></div>
#### 網址匹配：
除了靜態網址以外，您還可使用glob模式來匹配網址，例如/ API/ **。 有關詳細信息，請參閱上下文匹配。 此外，您能夠提供一個過濾器選項，該選項能夠是自定義函數，用於肯定請求是否應被代理：
<div class="se-preview-section-delimiter"></div>
複製代碼
proxyTable: {
‘**’: {
target: ‘jsonplaceholder.typicode.com‘,
filter: function (pathname, req) {
return pathname.match(‘^/api’) && req.method === ‘GET’
}
}
}
<div class="se-preview-section-delimiter"></div>
#### 單元測試：
本樣板用於單元測試的工具概述：
- Karma：啓動瀏覽器的測試運行器，運行測試並將結果報告給咱們。
- karma-webpack：使用Webpack捆綁咱們的測試的Karma插件。
- 摩卡：咱們編寫測試規範的測試框架。
- Chai：提供更好的斷言語法的測試斷言庫。
- Sinon：提供間諜，存根和模擬的測試實用程序庫。
Chai和Sinon是使用karma-sinon-chai進行集成的，因此全部Chai接口（應該是，指望，斷言）和sinon均可以在測試文件中全球使用。
<div class="se-preview-section-delimiter"></div>
#### 和文件：
- index.js
這是由karma-webpack用於捆綁全部測試代碼和源代碼（爲了覆蓋目的））的條目文件。 你能夠忽略它大部分。
- specs/
該目錄是您編寫實際測試的地方。 您能夠在測試中使用完整的ES2015 +和全部受支持的Webpack加載器。
- karma.conf.js
這是Karma配置文件。 有關詳細信息，請參閱Karma docs 。
在更多瀏覽器中運行測試
您能夠在多個真正的瀏覽器中運行測試，方法是在test / unit / karma.conf.js中安裝更多的業務發射器並調整瀏覽器字段。
模擬依賴
默認狀況下，此樣板安裝了注入裝載機。 有關* .vue組件的使用，請參閱vue-loader文檔進行測試。
<div class="se-preview-section-delimiter"></div>
#### 端到端測試：
此樣板使用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上的文檔。
<div class="se-preview-section-delimiter"></div>
#### 預售SEO
若是您但願預先投放一旦推送到生產時不會顯着更改的路線，請使用此Webpack插件：prerender-spa-plugin，它已通過Vue測試。 對於頻繁更改的頁面，Prerender.io和Netlify都提供按期從新預覽您的搜索引擎內容的計劃。
使用prerender-spa-plugin
將其安裝爲開發人員依賴關係：
`npm install --save-dev prerender-spa-plugin`須要在build / webpack.prod.conf.js中：
<div class="se-preview-section-delimiter"></div>
複製代碼
// 該行應該位於其餘「進口」生活的文件的頂部
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']。
<div class="se-preview-section-delimiter"></div>
#### 啓用vue-router的歷史記錄模式：
<div class="se-preview-section-delimiter"></div>
複製代碼
const router = new VueRouter({ mode: ‘history’, routes: […] }) ```
- 1. 從零開始搭建VUE項目
- 2. 搭建VUE項目(從零開始)
- 3. 從零開始搭建vue項目
- 4. vue-用Vue-cli從零開始搭建一個Vue項目
- 5. 從零開始搭建SpringBoot項目
- 6. 從零開始搭建react項目（一）
- 7. 從零開始的SpringBoot項目搭建
- 8. 從零開始搭建springboot項目
- 9. 從零開始webpack搭建項目
- 10. 從零開始搭建MVC項目
- 更多相關文章...
- • Maven 構建 Java 項目 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • PHP開發工具
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. 從零開始搭建VUE項目
- 2. 搭建VUE項目(從零開始)
- 3. 從零開始搭建vue項目
- 4. vue-用Vue-cli從零開始搭建一個Vue項目
- 5. 從零開始搭建SpringBoot項目
- 6. 從零開始搭建react項目（一）
- 7. 從零開始的SpringBoot項目搭建
- 8. 從零開始搭建springboot項目
- 9. 從零開始webpack搭建項目
- 10. 從零開始搭建MVC項目