在本文中，我们将学习如何制作一个vue插件并将其分发到npm，其他人可以安装和使用它。

插件大大提高了开发人员的开发效率。我们的大多数项目都依赖于它们，因为它们可以以非常快的速度发布新的功能。

正如官方Vue.js文档中所述，插件的范围没有限制。通常，我们希望实现以下五个功能：

添加全局方法或属性(如： Vue-custom-element)，添加全局资源：指令/过滤器/过渡(如vue-touch)，通过全局mixin方法添加一些组件选项(如vue-router)，添加Vue实例方法。通过将它们添加到Vue.prototype中实现一个库(如Vue-axios)，提供自己的API，并提供上面提到的一个或多个功能(如vue-router)好了，现在你知道vue插件是什么，它能满足什么需求了吧！

如何在vue项目中使用插件

通过npm install或yarn add安装插件后，需要将其导入main.js文件，并调用Vue.use()全局方法。

注意：所有插件都必须在新Vue()之前实例化。

从“Vue”导入Vue；从“MyPlugin”导入my plugin；vue . use(MyPlugin)；New Vue({//[.]})如果插件包支持cdn引用，也可以通过以下方式引用：

script src=' http :https://cdn . XXX.cn/NPM/[email protected]/dist/my plugin . min . js '/script此外，当您调用Vue.use()时，如果想要对插件进行一些自定义配置，可以这样做：

Vue.use (myplugin，{option1: false，option2: true})例如，在引入流行的Element UI库时，它支持传入全局配置对象

从“元素-用户界面”导入元素；import ' element-ui/lib/theme-粉笔/index . CSS '；Vue.use(Element，{//size用于更改组件的默认大小，zIndex设置初始z-index(默认值：2000) size :' small '，zIndex 3360 3000 })；现在让我们言归正传！开始构建你的第一个vue插件

为了制造一个很酷的按钮组件

作为一个有追求的前端，相信你肯定会想，‘如果公司有一套自己的UI组件库，那就太好了！’。如果你有这个想法，仔细看完这篇文章，会给你带来很多启发和启发。

步骤1:初始化插件目录结构

首先创建一个空的项目文件夹，随意取名字，然后初始化生成package.json文件(文件的内容后面会介绍)

$ mkdirku-button CD ku-button $ npminit #上面的命令会提示一些问题，只需要一直按enter键，然后最后创建一个package.json文件，然后在项目的根目录下创建一个src文件夹，其中会创建一个新的KuButton.vue组件。在这里，你甚至可以进行单个*的快速原型开发。vue文件通过vue的vue serve和vue build命令行，但前提是先安装一个额外的全局文件。

$ npminstall-g @ vue/CLI $ npminstall-g @ vue/CLI-service-global的安装完成后，当您成功执行以下命令行时：

$ vue serve KuButton.vue可以直接访问http://localhost33608080/

有关vue快速原型开发的更多知识，可以查看官方文档

接下来，我们开始改进Button组件的代码，让它运行起来！

步骤2:改进组件代码，使按钮可配置

在这里，我将模仿ElementUI库的Button组件来揭示它的精彩特性！

模板模板

template button : class='[' ku-button '，' ku-button - ' type，' ku-button - ' size，{ ' ku-button-round ' : round }]' @ click=' onClick ' slot/slot/button/template JavaScript

脚本导出默认值{ prop : { type : { type : String，default: 'default '，验证器(类型){返回['默认'，'主要'，'信息'，'警告'，'危险'].包括(类型)} }、round: { type:布尔值、default: false }、size: { type: String、default: '中、验证器(大小){ return ['中'、'小、'迷你'].包括（大小)} }、}、methods: { onClick(事件){这个.$emit('click '，事件);} } };/script样式风格

风格ku-button { display : inline-block；轮廓： 0；字体系列： 'Helvetica纽伊，Helvetica，阿里亚尔，无衬线；用户选择：无；光标：指针；线高： 1;空白： nowrap背景-color : # fff；border: 1px实心# dcdfe6color: # 606266-web套件-apparence :无；文本对齐：中心；盒子尺寸：边框盒子；大纲：无；保证金： 0；transit : 1 font-weight : 500；padd : 12px 20px font-size : 14px；边界半径： 4px} /*颜色*/.库-巴顿-默认{ }。酷6视频按钮-主要{ color: # fff背景色： # 409 eff边框颜色： # 409 eff} .ku-button-success { color : # fff；背景-颜色： # 67c 23a；边框颜色： # 67 c23a} .ku-button-info { color : # fff；背景色： # 909399;边框颜色： # 909399;} .ku-按钮-警告{ color: # fff背景-color : # e6a 23c；边框颜色： # e6a 23c} .ku-button-danger { color : # fff；背景-颜色： # f56 c6c边框颜色： # f56 c6c} /*大小*/.库-巴顿-中{ padd : 10px 20px font-size : 14px；边界半径： 4px} .ku-button-small { padd : 9px 15px；font-size : 12px边界半径： 3px} .ku-button-mini { padd : 7px 15px；font-size : 12px边界半径： 3px} /*是否圆角*/.ku-button-round { border-radius : 20px；}/样式后续我们就可以像这样使用：

库按钮类型="成功"大小="迷你"圆形小按钮/ku-按钮虽然我将按钮模板进行了简化，但这里有几个学习点很重要：

使用了不列颠帝国勋章规范。(更多关于不列颠帝国勋章的知识，可查看这里)通过小道具配置接收3个参数（按钮类型，按钮大小，按钮是否为圆角),这样方便使用者随时切换不同主题的按钮。使用了狭槽插槽，这样我们就可以这样使用库按钮按钮文本/ku-按钮定义了@点击事件，当点击组件时会触发$emit步骤3: 写一个安装方法

文章前面提到了Vue.use()方法，调用时它将会执行安装方法，这个方法的第一个参数是某视频剪辑软件构造器，第二个参数是一个可选的选项对象。

下面，我们在科学研究委员会中创建一个index.js文件，然后再里面写：

从""导入库按钮/Kubutton。Vue ' export default { install(Vue，options) { //注册全局组件//https://cn . vuejs . org/v2/guide/components-registration . html vue。组件(' ku-button '，KuButton) }}到这里，一个完整的插件就差不多啦！

步骤4: 完善根目录的package.json文件

打开刚刚新公共管理初始化创建的package.json文件

{ 'private': false，' name': 'ku-button '，' version': '1.0.0 '，' description ' : ' A niubility button '，' author ' : ' sugars '，' license': 'MIT '，' main': ' ./dist/index.umd.js '，' scripts ' : { ' dev ' : ' vue serve ku button。vue ' }，' files': [ 'dist' ]，' devDependencies': { '毕丽： '^4.7.3','滚动插件-vue ' : '^5.0.0',' vue-模板-编译器' : '^2.6.10' } }说明：

当私有属性为假时，意味着你的包不是私有的，每个人都可以查看。当程序包在npm中发布时，npm install使用name属性来引用程序包名称。请确保您的包名没有注册。version属性引用包版本号，每次向npm发布更新时都需要增加该版本号。您可以查看更多关于语义版本号的知识。description属性是指包的描述信息，这样大家就可以知道为什么要用main属性来指定包加载的入口文件，而require('moduleName ')会加载这个文件。该字段的默认值是模块根目录下的index.js。Scripts属性指定用于运行脚本命令的npm命令行的缩写。例如，build指定在运行npm run build时要执行的命令。file属性可以指定哪些文件需要发布到npm。例如，dist文件夹中的所有文件都在此指定。您可以在npm官方文档中查看更多关于package.json的知识。

包装

打包工具这里我用的是毕丽，一个强大的打包工具，速度快，零配置。

要开始安装打包工具：

$ npminstall-save-dev bili $ npminstall-save-dev roll-plugin-vue $ npminstall-save-dev vue-template-编译器，然后在项目的根目录下创建一个bili.config.js配置文件。配置如下：

模块后。exports={banner: true，output3360 { extractcss: false，format: ['UMD']，modulename: ' kubutton ' }，plugins 3360 { vue: true } }完成后，只需要执行一个命令就可以打包了。

成功打包$毕丽后，将在项目的根目录下生成一个dist文件夹，其中包含一个index.umd.js文件

分享你在国家预防机制方面的成果

这里，你的vue插件已经开发出来了。最后一步是在npmjs上发布你的插件！但前提是你需要有一个npmjs账户。如果你没有，你需要注册一个。如果有，可以跳过这一步。

打开终端，输入：

输入$ npm login //后，输入注册npmjs时填写的用户名、密码和电子邮件地址。//成功登录后，系统会提示：以用户名登录https://registry.npmjs.org/.查看当前npm用户登录状态：

$ npm whoami//如果登录成功，则输出登录用户名。检查以上所有步骤都正常后，进入新完成的ku-button项目目录并开始发布：

在$ npm publish成功执行后，您的插件将正式发布成功！

如果要更新插件，只需要增加package.json中的版本号，然后再次执行npm发布！

项目中使用了新发布的插件

您可以安装其他插件：

$ npminstall-saveku-button或

$纱线添加ku按钮下一步，引用main.js:

从“ku-button”导入kubutton从“vue”vue导入vue。最后，在你的页面中：

Ku-按钮圆形类型='成功'大小='小'酷！/ku-button

附加Github地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。