最近在研究 muse-ui 的实现，发现网上很少有关于 vue 插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。
笔者结合官方文档，与自己的摸索总结，以最简单的 FlexBox 组件为例子，带大家入门 vue 的插件编写，如果您是大牛，不喜勿喷～
项目结构
| src
| ---| plugin
| ---| ---| flexbox # 组件文件夹
| ---| ---| ---| flexbox.vue # flex 布局的父组件
| ---| ---| ---| flexboxItem.vue # flex 布局的子组件
| ---| ---| ---| flexbox.scss # 样式文件，我使用的是 sass
| ---| ---| ---| index.js # 组件的出口
| ---| ---| styles # 公用的 css 样式文件
| ---| ---| index.js # 插件的出口
| ---| App.vue
| ---| main.js<一> 让项目装载插件
首先，我们不去理会组件的具体实现，先让我们的项目能够正常装载一个我们自定义的插件。
现在，我们的目标，是让项目能够正常显示这两个组件，能显示文本 flexbox demo 就可以啦！
./src/plugin/flexbox/flexbox.vue
<template> <div>flexbox demo</div> </template> <script> export default { // 这是该组件的自定义名称， // 之后引用组件时就会用到这个名称。 name: 'my-flexbox' } </script>
./src/plugin/flexbox/flexboxItem.vue
<template> <div>flexboxItem demo</div> </template> <script> export default { name: 'my-flexbox-item' } </script>
./src/plugin/flexbox/index.js
这是整个 flexbox 组件的出口文件。
因为这个组件有两个子组件，所以我们将引入的 default 改名为该组件的名称。{ default as flexbox }
// 引用 scss 文件
import './flexbox.scss'
// 引用组件
export { default as flexbox } from './flexbox.vue'
export { default as flexboxItem } from './flexboxItem.vue'
./src/plugin/index.js
现在，我们来到插件的出口文件。
// ----- 1
import * as flexbox from './flexbox'
// ----- 2
const components = {
...flexbox
}
// ----- 3
const install = function (Vue, Option) {
// ----- 4
Object.keys(components).forEach((key) => {
Vue.component(components[key].name, components[key])
})
}
// ----- 5
export default {
install
}
-
引入组件
-
定义
components变量 -
这里是重点，vue 为编写插件提供了一个
install(Vue, Option)方法，该方法为 vue 添加全局功能；
该方法有两个参数，第一个是Vue构造器，第二个是可选的参数； -
使用 vue 的全局方法
Vue.component(Name, Object)定义组件，第一个参数是组件名，第二参数是组件对象； -
最后将组件默认导出。
./src/main.js
我们来到 main.js，在这里，我们将进行插件的最后配置啦。
使用 vue 的全局方法 Vue.use(PluginName, Options)，第一个参数是插件的名字，第二个是可选的参数。
import plugin from './plugin'
Vue.use(plugin)
./src/App.vue
终于，我们可以在项目中引用我们定义的组件啦！
<template> <my-flexbox></my-flexbox> <my-flexbox-item></my-flexbox-item> </template>
<二> Flexbox 组件的实现
组件的具体实现，就和平时自己写组件的方法是一样的了。
这里先贴出代码，我会将具体原理写在代码注释里面。
./src/plugin/flexbox/flexbox.vue
<template> <!-- 为组件绑定一个类，这个类的值通过计算属性来得出 --> <div class="my-flexbox" :class="classObj"> <!-- slot 用来装载子组件，my-flexbox-item --> <slot></slot> </div> </template> <script> export default { name: 'my-flexbox', props: { // 子组件 my-flexbox-item 之间是否存在间隙， // 默认，8px 的间隙。 gutter: { type: Number, default: 8 }, // 子组件的排列方式，水平，或垂直排列。 orient: { type: String, default: 'horizontal' }, justify: { type: String }, align: { type: String }, wrap: { type: String, default: 'nowrap' } }, computed: { // 我们通过父级传递过来的参数， // 来判断该组件需要应用哪些样式 // 如：<my-flexbox orient="vertical" justify="flex-start"></my-flexbox> classObj () { let classObj = {}; // orient if (this.orient === 'vertical') classObj['flex-vertical'] = true; // wrap if (this.wrap === 'wrap') { classObj['flex-wrap'] = true } else { classObj['flex-nowrap'] = true } // justify switch (this.justify) { case 'flex-start': classObj['justify-start'] = true; break; case 'flex-end': classObj['justify-end'] = true; break; case 'center': classObj['justify-center'] = true; break; case 'space-between': classObj['justify-space-between'] = true; break; case 'space-around': classObj['justify-space-around'] = true; break }; // align switch (this.align) { case 'flex-start': classObj['align-start'] = true; break; case 'flex-end': classObj['align-end'] = true; break; case 'center': classObj['align-center'] = true; break; case 'baseline': classObj['align-baseline'] = true; break; case 'stretch': classObj['align-stretch'] = true; break; }; return classObj; } } } </script>
./src/plugin/flexbox/flexbox.scss
scss 中定义需要使用到的样式
.my-flexbox {
100%;
display: flex;
}
.flex-vertical {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
/* justify */
.justify-start {
justify-content: flex-start
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-space-between {
justify-content: space-between
}
.justify-space-around {
justify-content: space-around
}
/* align */
.align-start {
align-items: flex-start
}
.align-end {
align-items: flex-end
}
.align-center {
align-items: center
}
.align-baseline {
align-items: baseline
}
.align-stretch {
align-items: stretch
}
./src/App.vue
好了！我们可以在项目中用到这个组件了！
<template> <div id="app"> <my-flexbox> <p>demo</p> <p>demo</p> </my-flexbox> </div> </template>
你也可以让他们垂直排列！
<template> <div id="app"> <my-flexbox orient="vertical"> <p>demo</p> <p>demo</p> </my-flexbox> </div> </template>
<三> FlexboxItem 组件的实现
flexbox-item 组件和 flexbox 组件实现原理大同小异，直接贴代码了！
./src/plugin/flexbox/flexbox.vue
<template> <div class="my-flexbox-item" :style="styleObj"> <slot></slot> </div> </template> <script> export default { name: 'my-flexbox-item', props: { grow: { type: [String, Number], default: 0 }, shrink: { type: [String, Number], default: 1 }, basis: { type: [String, Number], default: 'auto' }, order: { type: [String, Number], default: 0 } }, computed: { styleObj () { let styleObj = {}; // gutter let gutter = this.$parent.gutter, orient = this.$parent.orient; let marginName = orient === 'horizontal'?'marginLeft':'marginTop'; styleObj[marginName] = gutter + 'px'; // grow styleObj['flex-grow'] = this.grow; // shrink styleObj['flex-shrink'] = this.shrink; // basis styleObj['flex-basis'] = this.basis; // order styleObj['order'] = this.order; return styleObj; } } } </script>
./src/App.vue
<template> <div id="app"> <my-flexbox> <my-flexbox-item grow="1"> demo </my-flexbox-item> <my-flexbox-item> demo </my-flexbox-item> </my-flexbox> </div> </template>
总结
这只是 vue 中编写插件的其中一个方法，还有更多的，例如：
-
使用
Vue.directive(Name, [Define])，自定义指令，添加全局资源，如vue-touch。可以看我总结的这篇文章 -
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
-
添加全局方法或者属性，如:
vue-element。 -
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如
vue-router。