快速原型開發

你可以使用 vue serve 和 vue build 命令對單個 *.vue 檔案進行快速原型開發，不過這需要先額外安裝一個全域性的擴充套件：

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

vue serve 的缺點就是它需要安裝全域性依賴，這使得它在不同機器上的一致性不能得到保證。因此這隻適用於快速原型開發。

#vue serve

Usage: serve [options] [entry]

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


Options:

  -o, --open  開啟瀏覽器
  -c, --copy  將本地 URL 複製到剪下板
  -h, --help  輸出用法資訊
 

你所需要的僅僅是一個 App.vue 檔案：

<template>
  <h1>Hello!</h1>
</template>

然後在這個 App.vue 檔案所在的目錄下執行：

vue serve

vue serve 使用了和 vue create 建立的專案相同的預設設定 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推匯入口檔案——入口可以是 main.js、index.js、App.vue 或 app.vue

vue serve MyComponent.vue

如果需要，你還可以提供一個 index.html、package.json、安裝並使用本地依賴、甚至通過相應的配置檔案配置 Babel、PostCSS 和 ESLint。

#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             輸出用法資訊
 

你也可以使用 vue build 將目標檔案構建成一個生產環境的包並用來部署：

vue build MyComponent.vue

vue build 也提供了將元件構建成為一個庫或一個 Web Components 元件的能力。查閱構建目標瞭解更多。