介紹

vue-cli

• 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)
• 一個運(yùn)行時依賴（@vue/cli-service）
• 一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具
• 一套完整圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面

CLI

• CLI（@vue/cli）：
  • 一個全局安裝的 npm 包（提供vue命令）
    • vue create：快速創(chuàng)建一個新項(xiàng)目的腳手架
    • vue serve：構(gòu)建新想法的原型
    • vue ui：通過一套圖形化界面管理我們的所有項(xiàng)目
• CLI服務(wù)（@vue/cli-service）：
  • 一個開發(fā)環(huán)境依賴（包含）
    • 加載其他 CLI 插件的核心服務(wù)
  • 局部安裝在每個@vue/cli創(chuàng)建的項(xiàng)目中（包含）
    • 優(yōu)化過的 n 內(nèi)部 webpack 配置
  • 構(gòu)建于 webpack 和 webpack-dev-server 之上（包含）
    • vue-cli-service 命令：提供了 serve 命令、build 命令和 inspect 命令
• CLI插件：向Vue項(xiàng)目提供可選功能的 npm 包
  • 內(nèi)建插件：@vue/cli-plugin-
  • 社區(qū)插件：vue-cli-plugin-
  • 執(zhí)行 vue-cli-service 命令時，自動解析并加載 package.json 中列出的所有 CLI 插件

安裝

首先安裝node，版本要求在8.9或更高版本。

安裝命令：

// 局部安裝
npm i @vue/cli 
yarn add @vue/cli

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

檢查安裝是否成功：

vue --version

基礎(chǔ)

搭建基本項(xiàng)目

• 快速構(gòu)建命令 vue serve 和 vue build （必須是在全局安裝@vue/cli-service-global 依賴的前提下）

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

• vue serve 命令選項(xiàng)

  Usage: serve [options] [entry]
  在開發(fā)環(huán)境模式下零配置為 .js 或 .vue 文件啟動一個服務(wù)器
  
  Options:
  -o, --open  打開瀏覽器
  -c, --copy  將本地 URL 復(fù)制到剪切板
  -h, --help  輸出用法信息
  

• vue build 命令選項(xiàng)

  Usage: serve [options] [entry]
  在開發(fā)環(huán)境模式下零配置為 .js 或 .vue 文件啟動一個服務(wù)器
  
  Options: 
  -t, --target <target>  // 構(gòu)建目標(biāo)（app | lib | wc | wc-async，默認(rèn)值：app）
  -n, --name <name>      // 庫的名字或 Web Components組件的名字（默認(rèn)值：入口文件名）
  -d, --dest <dir>       // 輸出目錄（默認(rèn)值：dist）
  -h, --help             // 輸出用法信息
  

• 快速創(chuàng)建一個項(xiàng)目命令

  vue create
  

插件和preset

• 插件的注冊與聲明
• Preset
• 一個 Vue CLI preset 是一個包含創(chuàng)建新項(xiàng)目所需預(yù)定義選項(xiàng)和插件的 JSON 對象，讓用戶無需在命令提示中選擇它們

CLI 服務(wù)

• vue-cli-service serve 啟動一個開發(fā)服務(wù)器并附帶開箱即用的模塊熱加載（可以通過 devServer 配置開發(fā)服務(wù)器）

  用法：vue-cli-service serve [options] [entry]
  
  選項(xiàng)：
    --open    在服務(wù)器啟動時打開瀏覽器
    --copy    在服務(wù)器啟動時將 URL 復(fù)制到剪切版
    --mode    指定環(huán)境模式 (默認(rèn)值：development)
    --host    指定 host (默認(rèn)值：0.0.0.0)
    --port    指定 port (默認(rèn)值：8080)
    --https   使用 https (默認(rèn)值：false)
  

• vue-cli-service build，在輸出目錄產(chǎn)生一個環(huán)境的包，自動進(jìn)行代碼壓縮，vendor chunk splitting，內(nèi)聯(lián)chunk manifest 在HTML里面。

  用法：vue-cli-service build [options] [entry|pattern]
  
  選項(xiàng)：
    --mode        指定環(huán)境模式 (默認(rèn)值：production)
    --dest        指定輸出目錄 (默認(rèn)值：dist)
    --modern      面向現(xiàn)代瀏覽器帶自動回退地構(gòu)建應(yīng)用
    --target      app | lib | wc | wc-async (默認(rèn)值：app)
    --name        庫或 Web Components 模式下的名字 (默認(rèn)值：package.json 中的 "name" 字段或入口文件名)
    --no-clean    在構(gòu)建項(xiàng)目之前不清除目標(biāo)目錄
    --report      生成 report.html 以幫助分析包內(nèi)容
    --report-json 生成 report.json 以幫助分析包內(nèi)容
    --watch       監(jiān)聽文件變化
  

• vue-cli-service inspect，審查 vue-cli 項(xiàng)目的 webpack 配置

  用法：vue-cli-service inspect [options] [...paths]
  
  選項(xiàng)：
  --mode       // 指定環(huán)境模式，默認(rèn)值：development
  

查看所有可用命令

npx vue-cli-service help

緩存和并行處理

cache-loader：默認(rèn)為 Vue/Babel/TypeScript 編譯開啟，文件會緩存在 node_modules/.cache 中。

開發(fā)

瀏覽器的兼容性

HTML 和 靜態(tài)資源

css相關(guān)

webpack相關(guān)

環(huán)境變量和模式

構(gòu)建目標(biāo)

部署