本文我們將學(xué)習(xí)如何制作一個vue插件，并將其分發(fā)到npm上，能夠讓其他人安裝使用.

插件大大地提高了開發(fā)者的開發(fā)效率。我們的大多數(shù)項目都依賴于它們，因為它們能夠以極快的速度發(fā)布新功能。

正如官方Vue.js文檔中所述，插件的范圍沒有限制。通常我們想實現(xiàn)的功能有下面5種:

OK，現(xiàn)在你了解了vue插件是什么了，以及它可以滿足哪些需求！

如何在vue項目中使用插件

通過npm install或yarn add安裝插件后，你需要在main.js文件中導(dǎo)入它并調(diào)用Vue.use（）全局方法。

注意：在new Vue() 前，必須先實例化所有插件.

import Vue from "vue";import MyPlugin from "myplugin";Vue.use(MyPlugin);new Vue({// [...]})

如果插件包支持cdn方式引用的話，也可以通過以下方式引用：

<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>

另外，在你調(diào)用Vue.use()時，想對插件做一些自定義配置，你可以這么做：

Vue.use(MyPlugin, { option1: false, option2: true})

舉個例子，比如在引入熱門的Element UI庫時，它支持傳入一個全局配置對象

import Element from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Element, { // size 用于改變組件的默認尺寸，zIndex 設(shè)置彈框的初始 z-index（默認值：2000） size: 'small',  zIndex: 3000});

現(xiàn)在讓我們進入正題！開始構(gòu)建你的第一個vue插件💪

來制作一個酷炫的按鈕組件

作為一個有追求的前端，相信你們在公司開發(fā)項目時，肯定會想過，"要是公司有屬于自己的一套UI組件庫，那肯定很棒！"。
如果你有這個想法，那你認真看完這篇文章后，將會給你帶來很多靈感和啟發(fā)。

步驟 1：初始化插件目錄結(jié)構(gòu)

先創(chuàng)建一個空的項目文件夾，名字隨意取，然后初始化生成package.json文件（文件的內(nèi)容后面會介紹）

$ mkdir ku-button && cd ku-button$ npm init# 上面這個命令會提示一些問題，一直回車就行，然后最后會創(chuàng)建一個package.json文件

然后在項目根目錄中創(chuàng)建一個src文件夾，里面新建一個KuButton.vue組件，這里你甚至可以通過vue的vue serve和vue build命令行來對單個*.vue文件進行快速原型開發(fā)，不過前提需要先額外安裝一個全局的擴展