【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会把它剔除掉。

【Vue】用单文件(SFC，Single File Components)开发自定义组件，把这些组件生成到一个JS里。

猜你喜欢