【Vue】用單文件(SFC，Single File Components)開發自定義組件，把這些組件生成到一個JS里。在頁面里只要引用這個JS，就可以使用所有的自定義組件。
Vue是一個漸進式的JS框架，核心庫只關注視圖層，並且很容易與其他庫或現有項目進行集成。比如我只想用Vue來構建頁面的部分組件，那只要引入Vue核心庫和自定義的組件即可。
簡單實例如下：
custom-components.js
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
HTML里引入Vue核心庫和custom-components.js，就能使用這個自定義組件。
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Component Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="custom-components.js"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
</body>
</html>
但有個問題，這里的template是用字符串形式拼裝而成的，沒縮進、高亮等功能。當組件復雜的時候，用這種方式會讓人痛不欲生。
整個應用都用Vue實現的的時候，我們可以很輕易的使用單文件（下縮寫成SFC，Single File Components）形式開發組件，具體使用方式見官網Single File Components。一個組件相關的HTML、CSS、JS都放在同一個文件里，而且也支持語法高亮、JS模塊化、以及CSS Scope。
所以我們可能會一下問題。
碼農： Hi Vue，我們能否用SFC方式來實現組件，且仍舊用上面JS的方式引入所有的自定義組件？。
Vue：vue-cli-service build可以滿足你的要求。
完整命令：vue-cli-service build --target lib --formats=umd-min --dest public/dist --name custom-components --entry src/main.js
文件結構：compoents包含許多.vue文件，一個.vue文件就是SFC，即對應一個自定義組件。
命令詳解：
-
- --target lib：生成一個JS文件，最終生成的文件得包含所有的自定義組件。
- --dest public/dist：生成的JS在public/dist目錄下面。
- --formats=umd-min： 我只需生成一種格式 -- umd-min。默認是生成三個：common、umd、umd-min。
他們之間的區別網上能搜索到，CommonJS、UMD。
-
- --name custom-components：生成的JS文件前綴，見上圖。
- --entry src/main.js：build入口，這里面的內容很關鍵，得引入所有的單文件。
import Vue from 'vue'
import menuNav from './components/menu-nav.vue';
import logo from './components/logo.vue';
import searchBar from './components/search-bar.vue';
import flowPath from './components/flow-path.vue';
import showcase from './components/showcase.vue'
import codeName from './directives/code-name.js';
Vue.directive('code-name', codeName);
Vue.component('menu-nav', menuNav);
Vue.component('logo', logo);
Vue.component('search-bar', searchBar);
Vue.component('flow-path', flowPath);
Vue.component('showcase', showcase);
export {
}
因為通過Vue.component注冊組件，所以export一個空對象的就可。雖然我在這里import了Vue，但最終的生成的js不會包含Vue，vue-cli-service build會把它剔除掉。