Vue CLI 快速原型開發(fā)

你可以使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發(fā)，不過這需要先額外安裝一個全局的擴展：

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

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

vue serve

Usage: serve [options] [entry]

在開發(fā)環(huán)境模式下零配置為 .js 或 .vue 文件啟動一個服務(wù)器


Options:

  -o, --open  打開瀏覽器
  -c, --copy  將本地 URL 復(fù)制到剪切板
  -h, --help  輸出用法信息

你所需要的僅僅是一個 App.vue 文件：

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

然后在這個 App.vue 文件所在的目錄下運行：

vue serve

vue serve 使用了和 vue create 創(chuàng)建的項目相同的默認設(shè)置 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推導(dǎo)入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個。你也可以顯式地指定入口文件：

vue serve MyComponent.vue

如果需要，你還可以提供一個 index.html、package.json、安裝并使用本地依賴、甚至通過相應(yīng)的配置文件配置 Babel、PostCSS 和 ESLint。

vue build

Usage: build [options] [entry]

在生產(chǎn)環(huán)境模式下零配置構(gòu)建一個 .js 或 .vue 文件


Options:

  -t, --target <target>  構(gòu)建目標 (app | lib | wc | wc-async, 默認值：app)
  -n, --name <name>      庫的名字或 Web Components 組件的名字 (默認值：入口文件名)
  -d, --dest <dir>       輸出目錄 (默認值：dist)
  -h, --help             輸出用法信息

你也可以使用 vue build 將目標文件構(gòu)建成一個生產(chǎn)環(huán)境的包并用來部署：

vue build MyComponent.vue

vue build 也提供了將組件構(gòu)建成為一個庫或一個 Web Components 組件的能力。查閱構(gòu)建目標了解更多。