Vue學習筆記（一）------腳手架vue cli

時間 2019-11-30

標籤 vue 學習筆記腳手架 cli 简体版

原文原文鏈接

腳手架vue-cli(3.x)

vue-cli是一個基於vue.js進行快速開發的完整系統，提供下面幾個功能：

經過 @vue/cli 搭建交互式的項目腳手架。
經過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個運行時依賴 (@vue/cli-service），該依賴：
- 可升級；
- 基於 webpack 構建，並帶有合理的默認配置；
- 能夠經過項目內的配置文件進行配置；
- 能夠經過插件進行擴展。
一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套徹底圖形化的建立和管理 Vue.js 項目的用戶界面。

vue-cli是由如下幾個部分組成：

cli（@vue/cli）
cli服務（@vue/cli-service）
cli插件

CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端裏的 vue 命令，這些命令都是在全局安裝以後纔可使用的，例如：使用 vue serve 啓動項目須要在npm install -g @vue/cli-service-global以後才能夠。css

vue create 建立一個vue項目

vue serve 啓動vue項目

vue ui 進入vue可視化管理界面

當咱們沒有全局安裝vue時，能夠藉助npm 進行vue項目的啓動和打包等操做，例如： npm run serve 啓動vue項目; npm run build打包vue項目; 同時在啓動react項目的時候使用的是npm start; 在打包react項目的時候也是使用的npm run build; 可是建立react項目的是使用的react本身的腳手架create-react-app; vue使用的命令是vue create。html

CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每一個 @vue/cli建立的項目中。前端

加載其它 CLI 插件的核心服務；
一個針對絕大部分應用優化過的內部的 webpack 配置；
項目內部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

若是你熟悉 create-react-app 的話，@vue/cli-service 實際上大體於 react-scripts，儘管功能集合不同。vue

對應的vue項目的package.json中內容以下：node

{
  ......
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  ......
}
複製代碼

CLI 插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin-(社區插件) 開頭，很是容易使用。react

對應的vue項目的package.json中內容以下：webpack

{
  ......
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.21"
  }
  ......
}
複製代碼

腳手架的安裝

關於舊版本，若是你已經全局安裝了舊版本vue-cli（1.x或者2.x）的話，須要先卸載，npm uninstall vue-cli -g,如今是3.x的腳手架@vue/cli。git

安裝@vue/clies6

npm  intsall @vue/cli  -g 
複製代碼

安裝完成以後可使用vue --version 查看版本的信息以及是否安裝成功;github

腳手架的基礎使用

可使用vue serve和vue build對單個*.vue文件進行快速原型開發，可是須要安裝一個額外的全局擴展：

npm install -g @vue/cli-service-global
複製代碼

vue serve 的缺點就是它須要安裝全局依賴，這使得它在不一樣機器上的一致性不能獲得保證。所以這隻適用於快速原型開發。

vue serve經常使用的幾個參數：

Usage: serve [options] [entry]
在開發環境模式下零配置爲 .js 或 .vue 文件啓動一個服務器
-o, --open  打開瀏覽器
-c, --copy  將本地 URL 複製到剪切板
-h, --help  輸出用法信息
其中 [entry]是入口文件，入口能夠是 main.js、index.js、App.vue 或 app.vue 中的一個。你也能夠顯式地指定入口文件。
複製代碼

vue build經常使用的幾個參數

Usage: build [options] [entry]
在生產環境模式下零配置構建一個 .js 或 .vue 文件
-t, --target <target>  構建目標 (app | lib | wc | wc-async, 默認值：app)
-n, --name <name>      庫的名字或 Web Components 組件的名字 (默認值：入口文件名)
-d, --dest <dir>       輸出目錄 (默認值：dist)
-h, --help             輸出用法信息
複製代碼

vue create建立一個新的項目

好比說建立一個新項目： vue create hello-world，當你使用vue create 建立一個項目時會提示你選擇一個preset(預設)，你能夠選默認的包含了基本的 Babel + ESLint 設置的 preset，或者vue-router, vuex, less, babel, eslint的preset，也能夠選「手動選擇特性」來選取須要的特性。

默認設置很是合適快速的常見一個新項目，當你選擇手動建立時，你須要本身選擇須要的依賴：

若是你決定手動選擇特性，在操做提示的最後你能夠選擇將已選項保存爲一個未來可複用的 preset。

當咱們在使用npm install安裝依賴的時候，下載依賴每每會很是的慢，此時咱們須要修改一下，npm的下載源，能夠改成淘寶的下載源：

首先查看當前的npm源是什麼：

npm  config  get registry
複製代碼

上面的源已經設置爲淘寶的源，設置淘寶鏡像：

npm config set registry https://registry.npm.taobao.org
複製代碼

也能夠進行臨時修改，只生效一次：

npm install 包的名字 --registry https://registry.npm.taobao.org
複製代碼

vue create 經常使用的參數查看：

選項：
  -p, --preset <presetName>       忽略提示符並使用已保存的或遠程的預設選項
  -d, --default                   忽略提示符並使用默認預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字符串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry
  -g, --git [message]             強制 / 跳過 git 初始化，並可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠程預設選項
  -x, --proxy                     使用指定的代理建立項目
  -b, --bare                      建立項目時省略默認組件中的新手指導信息
  -h, --help                      輸出使用幫助信息
複製代碼

vue ui 圖形化界面管理項目

使用vue ui 進入圖形化管理界面

vue  ui
複製代碼

插件和preset（預設）

Vue CLI 使用了一套基於插件的架構。若是你查閱一個新建立項目的 package.json，就會發現依賴都是以 @vue/cli-plugin- 開頭的。插件能夠修改 webpack 的內部配置，也能夠向 vue-cli-service 注入命令。在項目建立的過程當中，絕大部分列出的特性都是經過插件來實現的。

現有的項目中安裝插件，安裝一個新的插件可使用：

vue add @vue/eslint
複製代碼

注意：

vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。這不意味着替換掉普通的 npm 包。對於這些普通的 npm 包，你仍然須要選用包管理器。

其實在項目開發中咱們通常會使用npm進行的依賴包的管理：

npm  install  包名  --save  在生產環境中使用（package.json中的scripts下）
npm  install  包名  --save-dev 在開發環境中安裝（package.json中的devDependencies下）
npm  install  安裝package.json中的全部的依賴
npm  uninstall [<name><version>][-g]/[--save][-dev]  卸載安裝的某個包
npm  update    [<name><version>][-g]/[--save][-dev]  更新安裝的某個包
npm  init  初始化package.json文件
複製代碼

在使用vue add時：

vue add @vue/eslint
# 這個命令將 @vue/eslint 解析爲完整的包名 @vue/cli-plugin-eslint，而後從 npm 安裝它，調用它的生成器。這個和以前的用法等價
vue add @vue/cli-plugin-eslint
複製代碼

若是想安裝第三方的，例如： @foo/vue-cli-plugin-bar

vue add @foo/bar
複製代碼

vue-router 和 vuex 的狀況比較特殊——它們並無本身的插件，可是你仍然能夠這樣添加它們：

vue add router
vue add vuex
複製代碼

若是出於一些緣由你的插件列在了該項目以外的其它 package.json 文件裏，你能夠在本身項目的 package.json 裏設置 vuePlugins.resolveFrom 選項指向包含其它 package.json 的文件夾。例如，若是你有一個 .config/package.json 文件，那麼package.json裏面要進行這樣大的修改：

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}
複製代碼

若是你須要在項目裏直接訪問插件 API 而不須要建立一個完整的插件，你能夠在 package.json 文件中使用 vuePlugins.service 選項：

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}
複製代碼

preset（預設）

一個 Vue CLI preset 是一個包含建立新項目所需預約義選項和插件的 JSON 對象，讓用戶無需在命令提示中選擇它們。

在 vue create 過程當中保存的 preset 會被放在你的 home 目錄下的一個配置文件中 (~/.vuerc)。你能夠經過直接編輯這個文件來調整、添加、刪除保存好的 preset。

進入./vuerc查看裏面的內容：

下面就是preset的一個列子：

{
  "useTaobaoRegistry": false,
  "presets": {
    "y": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  },
  "latestVersion": "3.6.3",
  "lastChecked": 1555467470124
}
複製代碼

CLI 服務

在運行項目的時候執行npm run serve其實至關於執行了 vue-cli-service serve命名;

vue-cli-service serve命令

用法：vue-cli-service serve [options] [entry]

選項：
  --open    在服務器啓動時打開瀏覽器
  --copy    在服務器啓動時將 URL 複製到剪切版
  --mode    指定環境模式 (默認值：development)
  --host    指定 host (默認值：0.0.0.0)
  --port    指定 port (默認值：8080)
  --https   使用 https (默認值：false)
複製代碼

vue-cli-service serve 命令會啓動一個開發服務器 (基於 webpack-dev-server) 並附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。

命令行參數 [entry] 將被指定爲惟一入口，而非額外的追加入口。嘗試使用 [entry] 覆蓋 config.pages 中的 entry 將可能引起錯誤。

vue-cli-service build命令

用法：vue-cli-service build [options] [entry|pattern]

選項：
  --mode        指定環境模式 (默認值：production)
  --dest        指定輸出目錄 (默認值：dist)
  --modern      面向現代瀏覽器帶自動回退地構建應用
  --target      app | lib | wc | wc-async (默認值：app)
  --name        庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在構建項目以前不清除目標目錄
  --report      生成 report.html 以幫助分析包內容
  --report-json 生成 report.json 以幫助分析包內容
  --watch       監聽文件變化
複製代碼

vue-cli-service build 會在 dist/ 目錄產生一個可用於生產環境的包，帶有 JS/CSS/HTML 的壓縮，和爲更好的緩存而作的自動的 vendor chunk splitting。它的 chunk manifest 會內聯在 HTML 裏。

這裏還有一些有用的命令參數：

--modern 使用現代模式構建應用，爲現代瀏覽器交付原生支持的 ES2015 代碼，並生成一個兼容老瀏覽器的包用來自動回退。
--target 容許你將項目中的任何組件以一個庫或 Web Components 組件的方式進行構建。更多細節請查閱構建目標。
--report 和 --report-json 會根據構建統計生成報告，它會幫助你分析包中包含的模塊們的大小。

vue-cli-service inspect命令

用法：vue-cli-service inspect [options] [...paths]

選項：
  --mode    指定環境模式 (默認值：development)
複製代碼

你可使用 vue-cli-service inspect 來審查一個 Vue CLI 項目的 webpack config。

緩存和並行處理

cache-loader 會默認爲 Vue/Babel/TypeScript 編譯開啓。文件會緩存在 node_modules/.cache中——若是你遇到了編譯方面的問題，記得先刪掉緩存目錄以後再試試看。
thread-loader 會在多核 CPU 的機器上爲 Babel/TypeScript 轉譯開啓。

瀏覽器兼容性

browserslist

你會發現有 package.json 文件裏的 browserslist 字段 (或一個單獨的 .browserslistrc 文件)，指定了項目的目標瀏覽器的範圍。

Polyfill

一個默認的 Vue CLI 項目會使用 @vue/babel-preset-app，它經過 @babel/preset-env 和 browserslist 配置來決定項目須要的 polyfill。

默認狀況下，它會把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會根據源代碼中出現的語言特性自動檢測須要的 polyfill。這確保了最終包裏 polyfill 數量的最小化。然而，這也意味着若是其中一個依賴須要特殊的 polyfill，默認狀況下 Babel 沒法將其檢測出來。

若是有依賴須要 polyfill，你有幾種選擇：

若是該依賴基於一個目標環境不支持的 ES 版本撰寫: 將其添加到 vue.config.js 中的 transpileDependencies 選項。這會爲該依賴同時開啓語法語法轉換和根據使用狀況檢測 polyfill。
若是該依賴交付了 ES5 代碼並顯式地列出了須要的 polyfill: 你可使用 @vue/babel-preset-app 的 polyfills 選項預包含所須要的 polyfill。注意 es6.promise 將被默認包含，由於如今的庫依賴 Promise 是很是廣泛的。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
複製代碼

如今模式

Vue CLI 提供了一個「現代模式」幫你解決這個問題。以以下命令爲生產環境構建：

vue-cli-service build --modern
複製代碼

Vue CLI 會產生兩個應用的版本：一個現代版的包，面向支持 ES modules 的現代瀏覽器，另外一箇舊版的包，面向不支持的舊瀏覽器。

現代版的包會經過 <script type="module"> 在被支持的瀏覽器中加載；它們還會使用 <link rel="modulepreload"> 進行預加載。
舊版的包會經過 <script nomodule> 加載，並會被支持 ES modules 的瀏覽器忽略。
一個針對 Safari 10 中 <script nomodule> 的修復會被自動注入。

對於一個 Hello World 應用來講，現代版的包已經小了 16%。在生產環境下，現代版的包一般都會表現出顯著的解析速度和運算速度，從而改善應用的加載性能。

HTML 和靜態資源

index文件

public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構建過程當中，資源連接會被自動注入。另外，Vue CLI 也會自動注入 resource hint (preload/prefetch、manifest 和圖標連接 (當用到 PWA 插件時) 以及構建過程當中處理的 JavaScript 和 CSS 文件的資源連接。

插值

由於 index 文件被用做模板，因此你可使用 lodash template 語法插入內容：

<%= VALUE %> 用來作不轉義插值；
<%- VALUE %> 用來作 HTML 轉義插值；
<% expression %> 用來描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默認值以外，全部客戶端環境變量也能夠直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
複製代碼

preload

是一種 resource hint，用來指定頁面加載後很快會被用到的資源，因此在頁面加載的過程當中，咱們但願在瀏覽器開始主體渲染以前儘早 preload。默認狀況下，一個 Vue CLI 應用會爲全部初始化渲染須要的文件自動生成 preload 提示。

prefetch

是一種 resource hint，用來告訴瀏覽器在頁面加載完成後，利用空閒時間提早獲取用戶將來可能會訪問的內容。

不生成 index

當基於已有的後端使用 Vue CLI 時，你可能不須要生成 index.html，這樣生成的資源能夠用於一個服務端渲染的頁面。這時能夠向 vue.config.js 加入下列代碼：

// vue.config.js
module.exports = {
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 刪除 HTML 相關的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}
複製代碼

css相關

引用靜態資源

全部編譯後的 CSS 都會經過 css-loader 來解析其中的 url() 引用，並將這些引用做爲模塊請求來處理。這意味着你能夠根據本地的文件結構用相對路徑來引用靜態資源。另外要注意的是若是你想要引用一個 npm 依賴中的文件，或是想要用 webpack alias，則須要在路徑前加上 ~ 的前綴來避免歧義。更多細節請參考處理靜態資源。

預處理器

你能夠在建立項目的時候選擇預處理器 (Sass/Less/Stylus)。若是當時沒有選好，內置的 webpack 仍然會被預配置爲能夠完成全部的處理。你也能夠手動安裝相應的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
複製代碼

而後你就能夠導入相應的文件類型，或在 *.vue 文件中這樣來使用：

<style lang="scss">
$color: red;
</style>
複製代碼

自動化導入

若是你想自動化導入文件 (用於顏色、變量、mixin……)，你可使用 style-resources-loader。這裏有一個關於 Stylus 的在每一個單文件組件和 Stylus 文件中導入 ./src/styles/imports.styl 的例子：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}
複製代碼

CSS Modules

你能夠經過 <style module> 以開箱即用的方式在 *.vue 文件中使用 CSS Modules。

若是想在 JavaScript 中做爲 CSS Modules 導入 CSS 或其它預處理文件，該文件應該以 .module.(css|less|sass|scss|styl) 結尾：

import styles from './foo.module.css'
// 全部支持的預處理器都同樣工做
import sassStyles from './foo.module.scss'
複製代碼

若是你想去掉文件名中的 .module，能夠設置 vue.config.js 中的 css.modules 爲 true：

// vue.config.js
module.exports = {
  css: {
    modules: true
  }
}
複製代碼

若是你但願自定義生成的 CSS Modules 模塊的類名，能夠經過 vue.config.js 中的 css.loaderOptions.css 選項來實現。全部的 css-loader 選項在這裏都是支持的，例如 localIdentName 和 camelCase：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}
複製代碼

webpack 相關

簡單的配置方式

調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
複製代碼

該對象將會被 webpack-merge 合併入最終的 webpack 配置。

若是你須要基於環境有條件地配置行爲，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置以後懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你能夠直接修改配置，或者返回一個將會被合併的對象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
    } else {
      // 爲開發環境修改配置...
    }
  }
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。