vue-cli 3 知識點整理

時間 2019-11-30

標籤 vue cli 知識整理简体版

原文原文鏈接

關於指南

筆記簡單整理以下：javascript

1、介紹

2、安裝

前提：

（1）node 版本要求：8.9或更高版本css

（2）如若已安裝舊版本vue-cli ，則將其卸載，從新安裝@vue-clihtml

安裝命令：

// 局部安裝
npm i @vue/cli  或 yarn add @vue/cli
//全局安裝
npm i -g @vue/cli  或 yarn add -g @vue/cli

複製代碼

檢查是否安裝成功 (全局安裝時可用如下命令檢查)

vue --version
複製代碼

3、基礎

搭建基本項目

（1）快速構建命令 vue serve 和 vue buildvue

前提：全局安裝 @vue/cli-service-global 依賴java

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

（2）vue serve 命令的選項node

Usage: serve [options] [entry]

在開發環境模式下零配置爲 .js 或 .vue 文件啓動一個服務器

Options:
  -o, --open  打開瀏覽器
  -c, --copy  將本地 URL 複製到剪切板
  -h, --help  輸出用法信息
複製代碼

（3）vue build 命令選項：webpack

Usage: build [options] [entry]

在生產環境模式下零配置構建一個 .js 或 .vue 文件

Options:

  -t, --target <target>  構建目標 (app | lib | wc | wc-async, 默認值：app)
  -n, --name <name>      庫的名字或 Web Components 組件的名字 (默認值：入口文件名)
  -d, --dest <dir>       輸出目錄 (默認值：dist)
  -h, --help             輸出用法信息
複製代碼

（4）快速建立一個項目命令git

vue create
複製代碼

插件和preset

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

CLI服務

（1）vue-cli-service serve 啓動一個開發服務器並附帶開箱即用的模塊熱加載（可經過 devServer 配置開發服務器）github

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

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

（2）vue-cli-service build （在輸出目錄產生一個生產環境的包，自動進行代碼壓縮，vendor chunk splitting，內聯chunk manifest 在 HTML 裏。）web

用法：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       監聽文件變化
複製代碼

（3）vue-cli-service inspect （審查 vue-cli 項目的 webpack 配置）

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

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

查看全部可用命令

npx vue-cli-service help
複製代碼

緩存和並行處理

（1）cache-loader：會默認爲 Vue/Babel/TypeScript 編譯開啓。文件會緩存在 node_modules/.cache 中

注：若是你遇到了編譯方面的問題，記得先刪掉緩存目錄以後再試試看。

（2）thread-loader

git Hook

4、開發

瀏覽器兼容性

（1）browserslist（指定了項目的目標瀏覽器的範圍）

（2）ployfill

（3）現代模式

HTML 和靜態資源

（1）index 文件

public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構建過程當中，資源連接會被自動注入

不生成index:

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

（2）插值

（3）preload 指定頁面加載後很快會被用到的資源，經過 @vue/preload-webpack-plugin 進行注入

（4）Prefetch 是一種 resource hint，用來告訴瀏覽器在頁面加載完成後，利用空閒時間提早獲取用戶將來可能會訪問的內容。經過 @vue/preload-webpack-plugin 進行注入

（5）構建一個多頁應用

（6）處理靜態資源

靜態資源處理方式

在 JavaScript 導入或在 template/CSS 中經過相對路徑被引用。這類引用會被 webpack 處理。
放置在 public 目錄下或經過絕對路徑被引用。這類資源將會直接被拷貝，而不會通過 webpack 的處理。

從相對路徑導入

使用相對路徑引入資源，url 都會被解析成一個依賴模塊如：url(./image.png) 會被翻譯爲 require('./image.png')
經過 file-loader 用版本哈希值和正確的公共基礎路徑來決定最終的文件路徑，再用 url-loader 將小於 4kb （可調整爲其餘值）的資源內聯，以減小 HTTP 請求的數量

URL轉換規則

url 爲絕對路徑，路徑被保留
url 以 . 開頭，按照從相對路徑導入方式進行解析
url 以 ~ 開頭，任何內容都按照模塊請求被解析，可引入 node 模塊資源
url 以 @ 開頭，任何內容都按照模塊請求被解析，它的用處在於 Vue CLI 默認會設置一個指向<projectRoot>/src 的別名 @。(僅做用於模版中)

public 文件夾（不推薦，只是應急手段）

任何放置在public 文件夾的靜態資源都會被簡單的複製，而不通過 webpack。你須要經過絕對路徑來引用它們。經過webpack 處理的好處:

腳本和樣式表會被壓縮且打包在一塊兒，從而避免額外的網絡請求。
文件丟失會直接在編譯時報錯，而不是到了用戶端才產生 404 錯誤。最終生成的文件名包含了內容哈希，所以你沒必要擔憂瀏覽器會緩存它們的老版本

什麼時候使用 public 文件夾

你須要在構建輸出中指定一個文件的名字（定義構建模板）。
你有上千個圖片，須要動態引用它們的路徑。
有些庫可能和webpack不兼容，只能將其用一個獨立的<script>標籤引入。

css 相關

（1）引用靜態資源全部編譯後的 CSS 都會經過 css-loader 來解析其中的 url() 引用，並將這些引用做爲模塊請求來處理

（2）預處理器

（3）自動化導入如自動化導入文件(用於顏色、變量、mixin……)，你可使用 style-resources-loader

（4）postCss

（5）css Modules

經過< style module > 以開箱即用的方式在.vue文件裏面使用
JavaScript 中做爲 CSS Modules 導入（import） CSS 或其它預處理文件，該文件應該以 .module.(css|less|sass|scss|styl) 結尾(設置 vue.config.js 中的 css.modules爲 true：導入文件時，文件名無需帶上.module; 同時，即便構建時，import的文件爲css文件，但也會將其當作 css Modules 來打包)
關於 css Modules 模塊的類名

默認的css Modules 模塊的類名

自定義生成的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'
      }
    }
  }
}
複製代碼

向預處理器 Loader 傳遞選項

提示這樣作比使用 chainWebpack 手動指定 loader 更推薦，由於這些選項須要應用在使用了相應 loader 的多個地方。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 因此這裏假設你有 `src/variables.scss` 這個文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}
複製代碼

爬蟲和標註系統就是利用這個方式實現scss文件全局使用

webpack 相關

（1）簡單的配置方式調整webpack 配置的最簡單的方式是修改 vue.config.js 中的 configureWebpack 選項提供一個對象，該對象將會被 webpack-merge 合併入最終的 webpack 配置

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

警告有些 webpack 選項是基於 vue.config.js 中的值設置的，因此不能直接修改。例如你應該修改 vue.config.js 中的 outputDir 選項而不是修改 output.path；你應該修改 vue.config.js 中的 publicPath 選項而不是修改 output.publicPath。這樣作是由於 vue.config.js 中的值會被用在配置裏的多個地方，以確保全部的部分都能正常工做在一塊兒

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

（2）鏈式操做（高級，利用 webpack-chain 在 vue.config.js 中的 chainWebpack 進行相應修改，配合 vue inspect 比較方便查看對應操做方式）

修改 Loader 選項

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}
複製代碼

添加新的 Loader
替換一個規則裏面的 Loader
修改插件選項

補充： webpack-chain 的 API webpack-chain閱讀一些源碼

審查項目的webpack 配置（該命令會將解析出來的 webpack 配置、包括鏈式訪問規則和插件的提示打印到 stdout。）

// 將其輸出重定向到一個文件(被格式化，非有效的webpack 配置文件)以便進行查閱
vue inspect > output.js

// 只審查第一條規則
vue inspect module.rules.0

// 指向一個規則或插件的名字
vue inspect --rule vue
vue inspect --plugin html

// 列出全部規則和插件的名字
vue inspect --rules
vue inspect --plugins
複製代碼

以一個文件的方式使用解析好的配置

環境變量和模式

（1）.env

.env 文件知識點補充：該文件中定義的變量，構建過程當中，會被注入到 process.env 中，成爲該對象的一個屬性；可是針對於瀏覽器這裏沒有 node 環境狀況下，在 process.env中的字段會被當作是一個全局變量，所以，在全部的頁面中均可以獲取到該字段的值

// 能夠替換項目根目錄中的下列文件來指定環境變量
// 被載入的變量將會對 vue-cli-service 的全部命令、插件和依賴可用
.env                # 在全部的環境中被載入
.env.local          # 在全部的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
複製代碼

補充：