欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-02 23:03:04
本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用. 插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们,因为它们能够以极快...

本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用.

插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能。

正如官方vue.js文档中所述,插件的范围没有限制。通常我们想实现的功能有下面5种:

  • 添加全局方法或者属性 (如: )
  • 添加全局资源:指令/过滤器/过渡等 (如:)
  • 通过全局 mixin 方法添加一些组件选项 (如:)
  • 添加 vue 实例方法,通过把它们添加到 vue.prototype 上实现 (如:)
  • 一个库,提供自己的 api,同时提供上面提到的一个或多个功能(如:)

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文件夹里的所有文件

你可以在查看更多关于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地址

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