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


Posted in Javascript onMay 01, 2019

本文我们将学习如何制作一个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

步骤 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>

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

附上 Github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
详解JavaScript树结构
Jan 09 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 #Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
深入讲解Python中的迭代器和生成器
2015/10/26 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Python 忽略文件名编码的方法
2020/08/01 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
物流经理自我评价
2013/09/23 职场文书
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
应届毕业生求职信
2013/11/30 职场文书
运动会广播稿60字
2014/01/15 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
群众路线剖析材料
2014/09/30 职场文书
教师党员自我评价2015
2015/03/04 职场文书
学子宴致辞大全
2015/07/27 职场文书
小学毕业感言200字
2015/07/30 职场文书