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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
layui 表单标签的校验方法
Sep 04 Javascript
JS实现简单日历特效
Jan 03 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
jquery 面包屑导航 具体实现
2013/06/05 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
初探nodeJS
2017/01/24 NodeJs
原生js实现日期计算器功能
2017/02/17 Javascript
js动态引入的四种方法
2018/05/05 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Django实现自定义404,500页面教程
2017/03/26 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python中常用的os操作汇总
2020/11/05 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
学年自我鉴定范文
2013/10/01 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
杨善洲电影观后感
2015/06/04 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js