封装vue插件并发布到npm详细步骤

news2024/12/24 20:51:44

前言

平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,但是如果项目不同我们也需要这个组件,那就需要复制一份公共组件代码到新项目,一个还好,如果是多个组件,这样就稍显麻烦了。
所以我们可以将封装好的组件打包发布至npm,就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了

一、准备

  • 需要封装vue组件,所以我们新建一个vue项目
vue create wq-clock

router vuex 都不需要, less/sass可以选一个, 这个项目我选用的less

二、封装

1. 文件结构

(1). 新建package文件夹, 存放组件。

  • 路径: src/package

(2). 该文件下存放我们封装的组件,我们有时可能需要封装多个组件

  • 路径: src/package/wqButton/index.vue
  • 路径:src/package/wqClock/index.vue

(3). 还需要一个js文件在全局注册封装的组件,以供引入此插件的项目所有组件可使用

  • 路径:src/package/index.js

在这里插入图片描述

2. 组件代码

至于封装什么组件,这个全看自己了,我刚好在做一个大屏项目需要用到一个展示当前日期时间的一个组件,但dataV组件库没有这样的组件,所以需要自己写一个。

路径: src/package/wqClock/index.vue

<template>
  <div id="clock">
    <div class="box" :style="{ color: textColor }">
      <span class="date">{{ date }}</span>
      <span class="time">{{ time }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "wqClock",
  props: {
    textColor: {
      type: String,
      default: "#2cf3fb",
    },
  },
  data() {
    return {
      timer: null,
      date: "",
      time: "",
    };
  },
  created() {
    this.updateTime();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    updateTime() {
      let date = new Date();
      let sDate = "-";
      let sTime = ":";

      let YYYY = formatHandle(date.getFullYear());
      let MM = formatHandle(date.getMonth() + 1);
      let DD = formatHandle(date.getDate());

      let hh = formatHandle(date.getHours());
      let mm = formatHandle(date.getMinutes());
      let ss = formatHandle(date.getSeconds());

      let w = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let week = w[date.getDay()];

      this.date = YYYY + sDate + MM + sDate + DD + ` ${week}`;
      this.time = hh + sTime + mm + sTime + ss;

      function formatHandle(value) {
        if (value >= 0 && value < 10) return "0" + value;
        else return value;
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less" scoped>
#clock {
  font-family: "Share Tech Mono", monospace;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    text-align: center;
    .date {
      font-size: 28px;
      letter-spacing: 2px;
      display: inline-block;
      padding-bottom: 10px;
    }
    .time {
      letter-spacing: 6px;
      font-size: 80px;
    }
  }
}
</style>

封装时可在App.vue文件中引入测试

3. 注册全局组件

使用Vue提供的install方法,这个方法会在使用Vue.use(plugin)时被调用,这样就能让我们需要导出的组件注册到全局, 就可以在任意组件中像使用子组件一样直接使用导出的组件

  • 路径:src/package/index.js
import wqButton from './wqButton/index.vue'
import wqClock from './wqClock/index.vue'

const comArr = [wqButton, wqClock];

// 注册组件
export default install = (Vue) => {
    comArr.forEach(item => {
        Vue.component(item.name, item)  // item.name就是引入组件中的name属性,所以每个组件都需要name
    })
};

三、发布

1. 打包

配置打包命令package,当然也可以自己取。就像我把serve改为wq一样

  • 路径: package.json
"scripts": {
    "wq": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name wq-clock --dest wq-clock"
  },

--target lib 指定打包的目录
--name 打包后的文件名
--dest 打包后的文件夹名称

执行打包命令

npm run package

打包完成后会在src同级产生一个wq-clock文件夹,也就是打包命令中配置的--dest属性值

在这里插入图片描述

2. 配置package.json文件

  • 初始化一个package.json文件

cd切换到wq-clock目录执行初始化package.json文件目录

npm init -y

此时wq-clock目录会初始化一个package.json文件,j具体配置如下

  • 路径:wq-clock/package.json
{
    "name": "wq-clock",  // 发布的包名,发布线上后,可以通过 npm install 该名称 来引用该包
    "version": "0.0.3",  // 版本号
    "description": "",  // 描述
    "main": "wq-clock.common.js",  // // 打包后的入口文件,若不配置,则在其他项目中就无法使用import xx from '包名'来引入组件,只能以包名作为起点来指定相对路径
    "scripts": {  // 运行命令
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [  // 关键词,可以通过npm搜索你填写的关键词找到你的包
        "时间",
        "时钟"
    ],
    "author": "wenqingkey",  // 作者
    "private": false,  // 是否设为私有包
    "license": "ISC"  // 代码授权许可
}

提示: 如果复制上面的json文件内容,需要删除注释,因为json文件不能有注释

3. 注册npm账号

  • 有npm账号可跳过此步

可去npm官网注册: https://www.npmjs.com;
也可以通过命令行注册

首先得将npm镜像源切换为官方的源,大部分人的镜像源可能为淘宝镜像源,其他的也不行,想发布就得切换为npm官方镜像源

npm config set registry=https://registry.npmjs.org

注册

npm adduser

依次填入账号、密码、邮箱, 填写完成后邮箱会收到一个npm发的一次性密码(也就是验证码) 再次填入即可,如果还未填写就报错,多半是得需要墙

4. 登录npm账号

切换到wq-clock目录,也就是你的包文件夹目录

执行命令

npm login

依次输入账号、密码、邮箱以及收到的一次性密码,如果输入邮箱之后一直卡在那里不动的话可以试试npm login -d

5. 发布npm插件

发布之前可去npm官网搜索一下你这个包名是否跟里面的包有重名的,有的话不能发,也可以使用npm i 你的包名测试

执行命令

npm publish

在这里插入图片描述
这是发布成功的效果,未成功请根据提示做相应的修改

  • 发布成功后可以在npm官网搜索查看自己发的包

在这里插入图片描述

四、使用

  • ant design vue element ui 这些组件库一样, 在需要使用该插件的项目引入

1. 安装插件

npm i wq-clock

2. 引入注册

  • 路径: main.js
import Vue from 'vue'
import WqClock from 'wq-clock';
import "../node_modules/wq-clock/wq-clock.css";
Vue.use(WqClock);

3. 组件使用

为了方便我直接在App.vue中使用

<template>
  <div id="app">
    <div class="wq_clock">
      <wq-clock></wq-clock>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
}

.wq_clock {
  width: 600px;
  height: 300px;
  background: #000;
}
</style>

4. 效果

在这里插入图片描述

5. 传参效果

因为我封装的时候给了个字体颜色的参数,所以可以传入一个textColor

<wq-clock textColor="#fff"></wq-clock>

在这里插入图片描述

到此基本的vue插件封装与发布就大功告成了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/21077.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Design Compiler工具学习笔记(2)

目录 引言 知识储备 设计 objects 库 objects 命令 对象和属性 实际操作 all_* all_inputs all_outputs all_registers 其他 remove_from_collection list 数组 查看环境变量 设置/取消环境变量 引言 本篇继续学习 DC的基本使用。本篇主要学习 design 和 libr…

spring authorization server 0.3.1 - 默认示例

spring authorization server 0.3.1 - 默认oidc开始1、default-authorizationserver项目1.1、AuthorizationServerConfig.java1.2、DefaultSecurityConfig.java1.3、Jwks.java1.4、KeyGeneratorUtils.java1.5、DefaultAuthorizationServer.java1.6、application.yml2、client项…

使用poi操作excel详解

使用poi操作excel详解1、POI工具介绍2、POI可操作的文件类型3、POI所需依赖4、xls和xlsx的区别5、POI Excel 写 03(xls)和07(xlsx)版本方式6、HSSF和XSSF写大文件的区别6.1、使用HSSF写大文件6.2、使用XSSF写大文件6.3、使用SXSS写大文件1、POI工具介绍 1.1、POI 是用Java编写…

为什么进程切换比线程切换代价大,效率低?【TLB:页表缓存/快表】

参考&#xff1a; 计组复习&#xff1a;cache&#xff0c;虚拟内存&#xff0c;页表与TLB小林coding - 为什么要有虚拟内存&#xff1f; 一、为什么进程切换比线程切换代价大&#xff0c;效率更低&#xff1f; 首先&#xff0c;先给出标题的答案&#xff08;关键在于进程切换…

CleanMyMac X2023最新版安装图文详解

对于刚刚入手苹果Mac设备的用户来说&#xff0c;什么软件好用、怎样设置能够获得最佳的使用体验等这些问题都需要一步一步摸索&#xff0c;但其实&#xff0c;从懵懂到熟练使用OS X系统的过程是非常有趣的。日前&#xff0c;有网友分享了自己认为在OS X系统下非常好用的软件&am…

免费查题接口系统调用

免费查题接口系统调用 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点…

Spring——Bean注入几种方式(放入容器)

Bean注入几种方式1.XML方式注入set方式注入构造方法注入2.注解方式注入ComponentComponentScanConfigurationBeanComponentScanImport3.实现ImportBeanDefinitionRegistrar接口4.实现FactoryBean5.实现BeanDefinitionRegistryPostProcessor1.XML方式注入 在现在这个Springboot…

jsp课程资源网站系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 课程资源网站系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql&#xff0c;使用…

怎么用docker将项目打包成镜像并导出给别人适用 (dockerfile)

前提 你得安装docker&#xff0c;没有安装的可以看看这篇文章 编写dockerfile 这个位置最好和我一样&#xff0c;不然后面打包成镜像可能出问题&#xff08;找不到jar包&#xff09; FROM openjdk:8-jdk-slim MAINTAINER JacksonNing COPY /target/iec104-1.0.0-SNAPSHOT.j…

这次把怎么做好一个PPT讲清-演讲篇

《商务演讲与汇报》 一、目标&#xff1a;演讲必须有清晰的目标 演讲&#xff1a;影响他人发生积极的**“改变”** 注意&#xff0c;目标就要设定的影响听众在听完你的演讲后发生积极的改变&#xff1b; 例&#xff1a;5月初向领导做月度工作汇报→→让领导在5月第一周例会…

QGradient(渐变填充)

QGradient&#xff08;渐变填充&#xff09; QGradient和QBrush一起使用来指定渐变填充。 Qt支持的填充&#xff1a; 线性渐变&#xff08;linear gradient&#xff09;,在起点和终点之间插值颜色辐射渐变&#xff08;radial gradient&#xff09;,在焦点和围绕它的圆的端点之…

2019上半年-2019下半年软件设计师上午题错题总结

2019上半年 30.以下关于极限编程&#xff08;XP&#xff09;的最佳实践的叙述中&#xff0c;不正确的是&#xff08;C &#xff09;。 A.只处理当前的需求&#xff0c;使设计保持简单 B.编写完程序之后编写测试代码 C.可以按日甚至按小时为客户提供可运行的版本 D.系统最…

【附源码】Python计算机毕业设计水库洪水预报调度系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…

linux进阶-构建deb软件安装包

Linux软件包的组成&#xff1a;源码包和二进制包。 文件类型保存目录普通程序/usr/binroot权限程序/usr/sbin程序配置文件/etc日志文件/var/log文档文件/usr/share/doc 源码包优点&#xff1a;开源免费、自由裁剪、修改源代码。 源码包缺点&#xff1a;安装步骤繁琐、编译时间…

【信号处理】卡尔曼滤波(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

区块链解决方案-最新全套文件

区块链解决方案-最新全套文件一、建设背景区块链的五大场景1、合同存证2、产品防伪溯源3、供应链金融4、住房租赁5、贸易金融业务二、建设架构三、建设方案四、获取 - 区块链全套最新解决方案合集一、建设背景 区块链的五大场景 1、合同存证 传统的合同存证存在着被篡改、删…

【AcWing19】【LeetCode】DFS - 46/47/39/77/216/17

文章目录代码随想录在B站的视频讲得比AcWing好模板题1&#xff1a;排列数字模板题2&#xff1a;n皇后方法一方法二LeetCode 46. 全排列LeetCode 47. 全排列 II &#xff08;重复元素&#xff09;LeetCode 39. 组合总和LeetCode 77. 组合LeetCode 216. 组合总和 IIILeetCode 17.…

黑马点评--分布式锁

黑马点评–分布式锁 基本原理与不同实现方式对比&#xff1a; 什么是分布式锁&#xff1a; ​ 分布式锁&#xff1a;满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心是实现多进程之间互斥&#xff0c;而满足这一点的方式有很多&#xff0c;常见的有三种…

Leetcode799. 香槟塔

文章目录题目链接题目大意解题思路代码(C)递推递归题目链接 点我 (^_^) 题目大意 解题思路 一开始看到这个 poured 范围这么大&#xff0c;以为是可以直接推出数学公式&#xff0c;但推了半天没推出来。 然后发现&#xff0c;直接从顶部开始模拟即可&#xff0c;某个row 下的…

HIve数仓新零售项目DWB层的构建

HIve数仓新零售项目 注&#xff1a;大家觉得博客好的话&#xff0c;别忘了点赞收藏呀&#xff0c;本人每周都会更新关于人工智能和大数据相关的内容&#xff0c;内容多为原创&#xff0c;Python Java Scala SQL 代码&#xff0c;CV NLP 推荐系统等&#xff0c;Spark Flink Kaf…