從零開始搭建VUE項目

時間  2019-11-18
標籤 開始 搭建 vue 項目 简体版
原文   原文鏈接

前言：php

      此樣板面向大型，嚴肅的項目，並假定您對Webpack和vue-loader有些熟悉。 請務必閱讀vue-loader的常見工做流配方的文檔。css

若是您只想嘗試vue-loader或者鞭打一個快速原型，請改用webpack-simple模板。html

快速開始：前端

    要使用這個模板，能夠用vue-cli來支持一個項目。 建議使用npm 3+更高效的依賴關係樹：vue

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

項目結構：node

.
├── 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                # 構建腳本和依賴關係

下面詳細講解下這個項目解構：webpack

   build/git

        此目錄包含開發服務器和生產webpack構建的實際配置。 一般，您不須要觸摸這些文件，除非您要自定義Webpack加載器，在這種狀況下，您應該看看build / webpack.base.conf.js。github

   config/index.jsweb

        這是顯示構建設置的一些最多見配置選項的主配置文件。 有關詳細信息，請參閱開發期間的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: [...]
})

 

這篇文章就分享到這裏了。歡迎關注下面的公衆號，進一步技術交流：

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程