關於Vue CLI3中啟動cli服務引數說明

Vue CLI3啟動cli服務引數

使用命令

在一個 Vue CLI 專案中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 存取這個命令。

這是你使用預設 preset 的專案的 package.json：

{
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}
}

你可以通過 npm 或 Yarn 呼叫這些 script：

npm run serve
# OR
yarn serve

如果你可以使用 npx (最新版的 npm 應該已經自帶)，也可以直接這樣呼叫命令：

npx 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)。

除了通過命令列引數，你也可以使用 vue.config.js 裡的 –devServer 欄位設定開發伺服器。

命令列引數 [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。

檢視所有的可用命令

有些 CLI 外掛會向 vue-cli-service 注入額外的命令。例如 @vue/cli-plugin-eslint 會注入 vue-cli-service lint 命令。你可以執行以下命令檢視所有注入的命令：

npx vue-cli-service help

你也可以這樣學習每個命令可用的選項：

npx vue-cli-service help [command]

Vue常用命令

• 安裝vue-cli：npm install -g @vue/cli
• 新建專案：vue init webpack projectName
• 執行專案：npm run dev
• 編譯專案: npm run build
• 引入框架（echarts 框架名稱）：cnpm install echarts -S

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。