vue-cli 3 知識點整理

關于指南

筆記簡單整理如下：

一、介紹

vue-cli 3 知識點整理

二、安裝

前提：

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

（2）如若已安裝舊版本vue-cli ，則将其解除安裝，重新安裝@vue-cli

安裝指令：

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

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

vue --version

三、基礎

搭建基本項目

（1）快速建構指令 vue serve 和 vue build

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

npm install -g @vue/cli-service-global

（2）vue serve 指令的選項

Usage: serve [options] [entry]

在開發環境模式下零配置為 .js 或 .vue 檔案啟動一個伺服器

Options:
  -o, --open  打開浏覽器
  -c, --copy  将本地 URL 複制到剪切闆
  -h, --help  輸出用法資訊

（3）vue build 指令選項：

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）快速建立一個項目指令

vue create

插件和preset

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

CLI服務

（1）vue-cli-service serve 啟動一個開發伺服器并附帶開箱即用的子產品熱加載

（可通過 devServer 配置開發伺服器）

用法：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 裡。）

用法：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)

4、檢視所有可用指令

npx vue-cli-service help

緩存和并行處理

（1）cache-loader：會預設為 Vue/Babel/TypeScript 編譯開啟。檔案會緩存在 node_modules/.cache 中

注：如果你遇到了編譯方面的問題，記得先删掉緩存目錄之後再試試看。

（2）thread-loader

git Hook

四、開發

浏覽器相容性

（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 預設會設定一個指向 /src 的别名 @。(僅作用于模版中)

public 檔案夾（不推薦，隻是應急手段）

任何放置在 public 檔案夾的靜态資源都會被簡單的複制，而不經過 webpack。你需要通過絕對路徑來引用它們。

通過webpack 處理的好處:

腳本和樣式表會被壓縮且打包在一起，進而避免額外的網絡請求。
檔案丢失會直接在編譯時報錯，而不是到了使用者端才産生 404 錯誤。

最終生成的檔案名包含了内容哈希，是以你不必擔心浏覽器會緩存它們的老版本

何時使用 public 檔案夾

你需要在建構輸出中指定一個檔案的名字（定義構模組化闆）。
你有上千個圖檔，需要動态引用它們的路徑。
有些庫可能和 webpack 不相容，隻能将其用一個獨立的

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 子產品的類名

vue-cli 3 知識點整理

自定義生成的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檔案全局使用

vue-cli 3 知識點整理

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 忽略

補充：

優先級：特定模式環境檔案(如：.env.production) > 一般環境檔案（如：.env）
優先級：Vue CLI 啟動時已經存在的環境變量 > .env 檔案。

如果在環境中有預設的 NODE_ENV，你應該移除它或在運作 vue-cli-service 指令的時候明确地設定 NODE_ENV。

（2）模式

development
production
test

（3）在用戶端側代碼中使用環境變量（在代碼中始終可用的三種變量）

隻有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜态嵌入到用戶端側的包中
NODE_ENV - 會是 “development”、“production” 或 “test” 中的一個。具體的值取決于應用運作的模式。
BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

補充：所有解析出來的環境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。

（4）隻有在本地有效的變量

檔案名為：.env.local

可在此基礎上指定模式： .env.development.local

6.建構目标

（1）應用

（2）庫

（3）Web Component 元件

部署

其他總結：

vue.config.js基本配置

vue-cli 插件

vue-cli 3 知識點整理

關于指南

一、介紹

二、安裝

三、基礎

四、開發

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題