乐趣区

Vuejs-构建你的第一个包并在NPM上发布

jiezi

本文我们将学习如何制作一个 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 插槽，这样我们就可以这样使用 <ku-button> 按钮文本 </ku-button>
  • 定义了 @click 事件，当点击组件时会触发 $emit

Step 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)
  }
}

到这里，一个完整的插件就差不多啦！????

Step 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>

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

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

退出移动版