摘要：手把手教你寫組件庫最近在研究的實現，發現網上很少有關于插件具體實現的文章，官方的文檔也只是一筆帶過，對于新手來說并不算友好。

最近在研究 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

./src/plugin/flexbox/flexboxItem.vue

./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

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

組件的具體實現，就和平時自己寫組件的方法是一樣的了。

這里先貼出代碼，我會將具體原理寫在代碼注釋里面。

./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

好了！我們可以在項目中用到這個組件了！

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

flexbox-item 組件和 flexbox 組件實現原理大同小異，直接貼代碼了！

./src/plugin/flexbox/flexbox.vue

./src/App.vue

這只是 vue 中編寫插件的其中一個方法，還有更多的，例如：

使用 Vue.directive(Name, [Define])，自定義指令，添加全局資源，如 vue-touch。可以看我總結的這篇文章

添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。

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

一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router。

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

覺得有幫助，就打賞打賞吧。