Vue CLI 3-基礎(1)快速建立雛形

Instant Prototyping快速建立雛形

你可以用單一 *.vue 檔案加上 vue serve 及 vue build指令快速建立雛形，但是需要先安裝額外擴充套件： 

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

 vue serve 的缺點是仰賴全域的相依，在不同機器上無法保證一致性。因此這只是用於快速雛形開發。

#vue serve

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information

只需要一個 App.vue 檔案：

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

在 App.vue 檔案所在目錄執行：

vue serve

vue serve 會使用跟用vue create建立專案時，相同的預設設定 (webpack, babel, postcss & eslint)  ，會自動推導相同目錄裡的入口檔案(entry file)  - 可能會是  main.js, index.js, App.vue or app.vue.其中之一。

你也可以明確指定想要的入口檔案：

vue serve MyComponent.vue

如果有需要，也可提供 index.html, package.json，安裝並使用本地端依賴，或甚至用對應的config檔案設定babel, postcss & eslint 。

#vue build

Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config


Options:

  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

You 你也可以用vue build指令將目標檔案打包成production bundle，並用來部署(deployment)：

vue build MyComponent.vue

vue build 也能夠將元件(component)建構成library或是web component。查閱 Build Targets 了解構多細節