Vue.js构建你的第一个包并在NPM上发布的方法步骤

本文我们将学习如何制作一个vue插件，并将其分发到npm上，能够让其他人安装使用.

插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们，因为它们能够以极快的速度发布新功能。

正如官方Vue.js文档中所述，插件的范围没有限制。通常我们想实现的功能有下面5种:

OK，现在你了解了vue插件是什么了，以及它可以满足哪些需求！

如何在vue项目中使用插件

通过npm install或yarn add安装插件后，你需要在main.js文件中导入它并调用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>

另外，在你调用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 设置弹框的初始 z-index（默认值：2000） size: 'small',  zIndex: 3000});

现在让我们进入正题！开始构建你的第一个vue插件💪

来制作一个酷炫的按钮组件

作为一个有追求的前端，相信你们在公司开发项目时，肯定会想过，"要是公司有属于自己的一套UI组件库，那肯定很棒！"。
如果你有这个想法，那你认真看完这篇文章后，将会给你带来很多灵感和启发。

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

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

$ mkdir ku-button && cd ku-button$ npm init# 上面这个命令会提示一些问题，一直回车就行，然后最后会创建一个package.json文件

然后在项目根目录中创建一个src文件夹，里面新建一个KuButton.vue组件，这里你甚至可以通过vue的vue serve和vue build命令行来对单个*.vue文件进行快速原型开发，不过前提需要先额外安装一个全局的扩展