【Vue】用单文件(SFC，Single File Components)开发自定义组件，把这些组件生成到一个JS里。
【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会把它剔除掉。
