摘要：手把手教你寫(xiě)組件庫(kù)最近在研究的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過(guò)，對(duì)于新手來(lái)說(shuō)并不算友好。

最近在研究 muse-ui 的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于 vue 插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過(guò)，對(duì)于新手來(lái)說(shuō)并不算友好。

筆者結(jié)合官方文檔，與自己的摸索總結(jié)，以最簡(jiǎn)單的 FlexBox 組件為例子，帶大家入門(mén) vue 的插件編寫(xiě)，如果您是大牛，不喜勿噴～

項(xiàng)目結(jié)構(gòu)

| src
| ---| plugin
| ---| ---| flexbox                # 組件文件夾
| ---| ---| ---| flexbox.vue       # flex 布局的父組件
| ---| ---| ---| flexboxItem.vue   # flex 布局的子組件
| ---| ---| ---| flexbox.scss      # 樣式文件，我使用的是 sass
| ---| ---| ---| index.js          # 組件的出口
| ---| ---| styles                 # 公用的 css 樣式文件
| ---| ---| index.js               # 插件的出口
| ---| App.vue
| ---| main.js

首先，我們不去理會(huì)組件的具體實(shí)現(xiàn)，先讓我們的項(xiàng)目能夠正常裝載一個(gè)我們自定義的插件。

現(xiàn)在，我們的目標(biāo)，是讓項(xiàng)目能夠正常顯示這兩個(gè)組件，能顯示文本 flexbox demo 就可以啦！

./src/plugin/flexbox/flexbox.vue

./src/plugin/flexbox/flexboxItem.vue

./src/plugin/flexbox/index.js

這是整個(gè) flexbox 組件的出口文件。
因?yàn)檫@個(gè)組件有兩個(gè)子組件，所以我們將引入的 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

現(xiàn)在，我們來(lái)到插件的出口文件。

// ----- 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 變量

這里是重點(diǎn)，vue 為編寫(xiě)插件提供了一個(gè) install(Vue, Option) 方法，該方法為 vue 添加全局功能；

該方法有兩個(gè)參數(shù)，第一個(gè)是 Vue構(gòu)造器，第二個(gè)是可選的參數(shù)；

使用 vue 的全局方法 Vue.component(Name, Object) 定義組件，第一個(gè)參數(shù)是組件名，第二參數(shù)是組件對(duì)象；

最后將組件默認(rèn)導(dǎo)出。

./src/main.js

我們來(lái)到 main.js，在這里，我們將進(jìn)行插件的最后配置啦。

使用 vue 的全局方法 Vue.use(PluginName, Options)，第一個(gè)參數(shù)是插件的名字，第二個(gè)是可選的參數(shù)。

import plugin from "./plugin"
Vue.use(plugin)

./src/App.vue

終于，我們可以在項(xiàng)目中引用我們定義的組件啦！

組件的具體實(shí)現(xiàn)，就和平時(shí)自己寫(xiě)組件的方法是一樣的了。

這里先貼出代碼，我會(huì)將具體原理寫(xiě)在代碼注釋里面。

./src/plugin/flexbox/flexbox.vue

./src/plugin/flexbox/flexbox.scss

scss 中定義需要使用到的樣式

.my-flexbox {
    width: 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

好了！我們可以在項(xiàng)目中用到這個(gè)組件了！

你也可以讓他們垂直排列！

flexbox-item 組件和 flexbox 組件實(shí)現(xiàn)原理大同小異，直接貼代碼了！

./src/plugin/flexbox/flexbox.vue

./src/App.vue

這只是 vue 中編寫(xiě)插件的其中一個(gè)方法，還有更多的，例如：

使用 Vue.directive(Name, [Define])，自定義指令，添加全局資源，如 vue-touch?？梢钥次铱偨Y(jié)的這篇文章

添加 Vue 實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn)。

添加全局方法或者屬性，如: vue-element。

一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能，如 vue-router。

本文的案例，只講解了最簡(jiǎn)單的如何配置插件，意在幫助大家盡快上手。

覺(jué)得有幫助，就打賞打賞吧。