Vue.js - 构建你的第一个包并在NPM上发布

本文咱们将学习如何制做一个vue插件，并将其分发到npm上，可以让其余人安装使用.

插件大大地提升了开发者的开发效率。咱们的大多数项目都依赖于它们，由于它们可以以极快的速度发布新功能。

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

• 添加全局方法或者属性 (如: vue-custom-element)
• 添加全局资源：指令/过滤器/过渡等 (如：vue-touch)
• 经过全局 mixin 方法添加一些组件选项 (如：vue-router)
• 添加 Vue 实例方法，经过把它们添加到 Vue.prototype 上实现 (如：vue-axios)
• 一个库，提供本身的 API，同时提供上面提到的一个或多个功能（如：vue-router）

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文件进行快速原型开发，不过前提须要先额外安装一个全局的扩展

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global
复制代码

安装完成后，当你成功执行如下命令行后：

$ vue serve KuButton.vue
复制代码

就能够直接在浏览器访问 http://localhost:8080/

更多关于vue快速原型开发的知识，你能够查看官方文档

下面，咱们开始完善Button按钮组件的代码，让它跑起来！

步骤 2: 完善组件代码，让按钮可配置化

这里我将模仿ElementUI库的Button组件，给你们揭晓它的奇妙之处！

模板 Template

<template>
  <button :class="[ 'ku-button', 'ku-button--' + type, 'ku-button--' + size, { 'ku-button--round': round } ]" @click="onClick">
    <slot></slot>
  </button>
</template>
复制代码

JavaScript

<script> export default { props: { type: { type: String, default: 'default', validator(type) { return ['default', 'primary', 'info', 'warning', 'danger'].includes(type) } }, round: { type: Boolean, default: false }, size: { type: String, default: "medium", validator(size) { return ["medium", "small", "mini"].includes(size) } }, }, methods: { onClick(event) { this.$emit("click", event); } } }; </script>
复制代码

样式 Style

<style> .ku-button { display: inline-block; outline: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; cursor: pointer; line-height: 1; white-space: nowrap; background-color: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } /*颜色*/ .ku-button--default { } .ku-button--primary { color: #fff; background-color: #409eff; border-color: #409eff; } .ku-button--success { color: #fff; background-color: #67c23a; border-color: #67c23a; } .ku-button--info { color: #fff; background-color: #909399; border-color: #909399; } .ku-button--warning { color: #fff; background-color: #e6a23c; border-color: #e6a23c; } .ku-button--danger { color: #fff; background-color: #f56c6c; border-color: #f56c6c; } /*大小*/ .ku-button--medium { padding: 10px 20px; font-size: 14px; border-radius: 4px; } .ku-button--small { padding: 9px 15px; font-size: 12px; border-radius: 3px; } .ku-button--mini { padding: 7px 15px; font-size: 12px; border-radius: 3px; } /*是否圆角*/ .ku-button--round { border-radius: 20px; } </style>
复制代码

后续咱们就能够像这样使用:

<ku-button type="success" size="mini" round>小按钮</ku-button>
复制代码

虽然我将按钮模板进行了简化，但这里有几个学习点很重要：

• 使用了BEM规范。（更多关于BEM的知识，可查看这里）
• 经过props配置接收3个参数（按钮类型，按钮大小，按钮是否为圆角），这样方便使用者随时切换不一样主题的按钮。
• 使用了slot插槽，这样咱们就能够这样使用按钮文本
• 定义了@click事件，当点击组件时会触发$emit

步骤 3: 写一个Install方法

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

下面，咱们在src中建立一个index.js文件，而后再里面写：

import KuButton from "./KuButton.vue"

export default {
  install(Vue, options) {
    // 注册全局组件
    // https://cn.vuejs.org/v2/guide/components-registration.html
    Vue.component("ku-button", KuButton)
  }
}
复制代码

到这里，一个完整的插件就差很少啦！ 👏

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

打开刚刚npm init建立的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 KuButton.vue"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "bili": "^4.7.3",
    "rollup-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}
复制代码

说明：

• private属性为false时表明你的包不是私有的，全部人都能查看并npm install使用
• name属性指后续发布在npm时的包名，请确保你的包名未被注册
• version属性指包的版本号，在你每次发布更新到npm时，都须要增长版本号。你能够查看更多语义化版本号的知识
• description属性指包的描述信息，写上去好让你们知道你这个包是干吗用的
• main属性指定了包加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
• scripts属性指定了运行脚本命令的npm命令行缩写，好比build指定了运行npm run build时，所要执行的命令。
• files属性能够指定哪些文件须要被发布到npm上，好比这里指定了dist文件夹里的全部文件

你能够在npm官方文档查看更多关于package.json的知识

打包

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

开始安装打包工具：

$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler
复制代码

而后在项目根目录下建立一个bili.config.js配置文件，配置以下：

module.exports = {
  banner: true,
  output: {
    extractCSS: false,
    format: ['umd'],
    moduleName: 'KuButton'
  },
  plugins: {
    vue: true
  }
}
复制代码

完成后，你只须要执行一个命令就打包完成，就这么简单：

$ bili
复制代码

打包成功后，在项目根目录下会生成一个dist文件夹，里面有个index.umd.js文件

在npm上分享你的成果

到这里，你的vue插件就开发完成了。剩下最后一步，就是在npmjs上发布你的插件！ 但前提是你须要有一个npmjs帐号，若是没有的话须要去注册一个，有的话能够跳过这一步。

打开终端，输入：

$ npm login 
// 回车后，输入你注册npmjs时填写的用户名，密码和邮箱
// 登陆成功后，会提示：Logged in as <username> on https://registry.npmjs.org/.
复制代码

查看当前npm用户登陆状况:

$ npm whoami
// 若是登陆成功，输出的是登陆的用户名
复制代码

检查以上步骤都没问题后，进入刚刚完成的ku-button项目目录，开始发布：

$ npm publish
复制代码

执行成功后，你的插件就正式发布成功了！！🎉

后续若是要更新插件，只须要增长package.json里的version版本号，而后再次执行npm publish发布更新就能够了！

项目中使用刚发布的插件

你能够像安装其余插件同样：

$ npm install --save ku-button
或者
$ yarn add ku-button
复制代码

接着，在main.js引用：

import KuButton from "ku-button"
import Vue from "vue"

Vue.use(KuButton)
复制代码

最后，在你的页面中这样：

<ku-button round type="success" size="small">真酷！!</ku-button>
复制代码

附上 Github地址

到这里就结束啦！记得给个赞哦！👍

如转载本文请注明文章做者及出处！