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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
python计算圆周率pi的方法
2015/07/11 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python 安装impala包步骤
2020/03/28 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
python构造IP报文实例
2020/05/05 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
董事长职责范文
2013/11/08 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
先进基层党组织材料
2014/12/25 职场文书
员工辞职信范文
2015/03/02 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
python开发制作好看的时钟效果
2022/05/02 Python