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