一、安裝 vue-cli v3

二、快速原型開發

安裝vue-cli的全局擴展

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

啟動并打開瀏覽器

vue serve -o App.vue

build

vue App.vue

三、創建項目

vue create hello-world

tip: 可在選擇時preset時，選擇預置的babel、vue-router、vuex等。

四、插件管理

安裝vue scope插件

vue add @vue/eslint

這相當于：

vue add @vue/cli-plugin-eslint

安裝非vue scope插件：

# 安裝并調用 vue-cli-plugin-apollo
vue add apollo

兩個特殊插件：

vue add router
vue add vuex

五、啟動，構建及代碼檢查

@vue/vue-cli-service ，它是工具

package.json中的片段：

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

重要參數：

1. serve

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

選項：

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

2. 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       監聽文件變化