使用npm发布自己的组件库

在日常开发中,我们习惯性的会封装一些个性化的组件以适配各种业务场景,突发奇想能不能建一个自己的组件库,今后在各种业务里可以自由下载安装自己的组件。

一. 项目搭建

首先直接使用vue-cli创建一个vue2版本的项目,并下载好elementui,这里我们会尝试封装一个适配上万数据的下拉框组件。

二. 组件准备工作

项目搭建完成后我的目录结构大概是这样的
在这里插入图片描述
通常人们喜欢新建一个packages文件夹专门存放组件,例如我们熟悉的element-ui就是如此,但这里我想了想我本身就有一个components文件夹了,干脆就直接使用这个文件夹做我的组件文件夹了,没必要专门单独新建一个。

这里我们需要建一个index.js文件用于组件的注册操作,以下是文件内容

let components = []
const requireAll = require.context("@/components", true, /index\.vue$/)
const modulList = requireAll.keys().map((item) => requireAll(item))
modulList.forEach(({ default: vm }) => {components.push(vm)
})// 全局引入
const install = function (Vue) {// 遍历组件列表并注册全局组件components.forEach((component) => {//component.name 此处使用到组件vue文件中的 name 属性Vue.component("Cl" + component.name, component)})
}let exportData = {install,
}// 适配单个引入
components.forEach((component) => {component.install = function (Vue) {Vue.component("Cl" + component.name, component)}exportData[component.name] = component
})export default exportData

简单说下上面的代码

  1. 首先我们创建了一个components数组用来存放我们获取的组件。
  2. 获取组件的方法使用了webpack自带的一写api,可以直接访问到我们指定的文件夹,然后正则匹配出我们需要的组件文件。
  3. 然后写一个install方法用于组件的批量全局注册。
  4. 接着我们map下这个components将所有的组件分别构建一个install方法,这样的话我们就可以拥有全局引用和按需引用两种引用模式了。注意这里按需导入并不能像element-ui那样直接import { Button } from “element-ui”,element-ui可以这样写是因为他使用了babel-plugin-component 插件,可以根据你提供的关键字比如Button去指定文件直接读取,我们要按需导入的话据需要
    import toolsUi from "element-ui"
    Vue.use(toolsUi.组件名称)
    
  5. 最后我们将所有数据直接导出。

三. 构建出发布的包

然后我们需要在package.json里面配置下我们的打包命令,这里我是这样写的

"npmUp": "vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_ui"
  • vue-cli-service build :对指定文件夹进行打包
  • --target lib:指定构建的目标为库(library)。这将使构建工具以库模式进行构建,生成一个可供他人使用的组件库。
  • ./src/components/index.js:指定入口文件路径。这是你组件库的主要入口文件。
  • --name tools_ui:指定组件库的名称。你的组件库将以 tools_ui 为名称进行构建和导出。
  • --dest tools_ui:指定构建输出的目录。生成的组件库将被输出到名为 tools_ui 的目录中。

然后我们直接执行命令:npm run npmUp

这个时候我们就可以看到我们打包出来的文件夹了
在这里插入图片描述

四. 发布工作

我们在终端cd进入到我们的tools-ui下,然后npm init -y来初始化一个新的 package.json文件,在这个文件里面配置出我们的包信息,例如版本,名称等。然后我们使用npm adduser进行登录操作(一般会校验用户名,密码等),前提是已经在npm上有自己的账号。最后我们使用npm publish进行发布操作。

注意第一次发布而可能会遇到大大小小的问题,例如node版本,npm版本问题,npm登录问题,包名称重复等问题,需要具体问题具体分析,一般他会有对应的提示。

五 使用组件库

我们可以直接npm i 发布库的名称进行下载操作。然后在main.js里面直接引入

import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui)

当然我们也可以按需加载

import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui.MuchSelect)

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

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

相关文章

Ps:陷印

在准备图像进行专业印刷之前,陷印 Trap是一个重要的步骤。 在彩色印刷中,多种颜色的墨水通常分别印刷。陷印是一种叠印技术,它可避免打印时印版的微小偏差或移动而使打印图像出现微小的缝隙。 进行陷印处理以纠正未对齐现象 A. 未对齐现象&am…

原始值的响应式方案

原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined 和 null 等类型的值。在JavaScript 中,原始值是按值传递的,而非按引用传递。这意味着,如果一个函数接收原始值作为参数,那么形参与实参之间没有引用关系&#x…

代码逻辑修复与其他爬虫ip库的应用

在一个项目中,由于需要设置 http_proxy 来爬虫IP访问网络,但在使用 requests 库下载文件时遇到了问题。具体表现为在执行 Python 脚本时,程序会阻塞并最终超时,无法正常完成文件下载。 解决方案 针对这个问题,我们可以…

VB.net读写S50/F08IC卡,修改卡片密码控制位源码

本示例使用设备:Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/智能海报/-淘宝网 (taobao.com) 函数声明 Module Module1读卡函数声明Public Declare Function piccreadex Lib "OUR_MIFARE.dll" (ByVal ctrlword As Byte, ByRef serial As Byte, …

基于单片机K型热电偶温度采集报警系统

**单片机设计介绍, 基于单片机K型热电偶温度采集报警系统 文章目录 一 概要简介系统特点系统组成工作原理应用领域 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机K型热电偶温度采集报警系统介绍 简介 该系统是基于单片…

MongoDB归并连续号段-(待验证)

实现按照不同条件归并连续号段的方式与具体的数据模型和查询需求有关,以下是一种常见的方式: 假设有一个文档集合,包含如下字段: {"_id": ObjectId("613c3050d5d9b45a0de7c290"),"group": "…

【论文阅读笔记】Deep learning for time series classification: a review

【论文阅读笔记】Deep learning for time series classification: a review 摘要 在这篇文章中,作者通过对TSC的最新DNN架构进行实证研究,探讨了深度学习算法在TSC中的当前最新性能。文章提供了对DNNs在TSC的统一分类体系下在各种时间序列领域中的最成功…

8 Redis与Lua

LUA脚本语言是C开发的,类似存储过程,是为了实现完整的原子性操作,可以用来补充redis弱事务的缺点. 1、LUA脚本的好处 2、Lua脚本限流实战 支持分布式 import org.springframework.core.io.ClassPathResource; import org.springframework.data.redis…

Map 和 WeakMap:JavaScript 中的键值对集合

JavaScript 是一种动态、弱类型的脚本语言,经常用于构建现代 Web 应用程序。在编写 JavaScript 代码时,我们经常需要使用各种数据结构来存储和管理数据。其中,Map 和 WeakMap 就是两个非常有用的数据结构,它们分别提供了用于存储键…

Excel 文件比较工具 xlCompare 11.01 Crack

比较两个 Excel 文件之间的差异 xlCompare. xlCompare.com 是性能最佳的 Excel diff 工具,用于比较两个 Excel 文件或工作表并在线突出显示差异。xlCompare 包括免费的在线 Excel 和 CSV 文件比较服务以及用于比较和合并 Excel 文件的强大桌面工具。如果您想在线了…

软件测试: 测试用例

一. 软件测试四要素 测试环境,操作步骤,测试数据,预期结果 二. 基于需求进行测试用例的设计 基于需求设计测试用例是测试设计和开发测试用例的基础,第一步就要分析测试需求,验证需求是否正确,完整,无二义性,并且逻辑自洽.在需求正确的基础上细化测试需求,从测试需求提炼出一…

Java语言基础第三天

运算符: 算术:、-、*、/、%、、-- %:取模/取余,余数为0即为整除 System.out.println(5%2); //1,商2余1 System.out.println(8%2); //0,商4余0----整除 System.out.println(2%8); //2,商0余2 /--:自增1/自…

React整理总结(五、Redux)

1.Redux核心概念 纯函数 确定的输入,一定会产生确定的输出;函数在执行过程中,不能产生副作用 store 存储数据 action 更改数据 reducer 连接store和action的纯函数 将传入的state和action结合,生成一个新的state dispatc…

2023年亚太杯数学建模亚太赛A题思路解析+代码+论文

下文包含:2023年亚太杯数学建模亚太赛A题思路解析代码参考论文等及如何准备数学建模竞赛(23号比赛开始后逐步更新) C君将会第一时间发布选题建议、所有题目的思路解析、相关代码、参考文献、参考论文等多项资料,帮助大家取得好成…

猫12分类:使用yolov5训练检测模型

前言: 在使用yolov5之前,尝试过到百度飞桨平台(小白不建议)、AutoDL平台(这个比较友好,经济实惠)训练模型。但还是没有本地训练模型来的舒服。因此远程了一台学校电脑来搭建自己的检测模型。配置…

hdfsClient_java对hdfs进行上传、下载、删除、移动、打印文件信息尚硅谷大海哥

Java可以通过Hadoop提供的HDFS Java API来控制HDFS。通过HDFS Java API,可以实现对HDFS的文件操作,包括文件的创建、读取、写入、删除等操作。 具体来说,Java可以通过HDFS Java API来创建一个HDFS文件系统对象,然后使用该对象来进…

Django DRF权限组件

在Django的drf框架内的权限组件,如果遇到多个权限认证类,是需要所有的权限类都要通过验证,才能访问视图。 一、简单示例 1、per.py 自定义权限类 from rest_framework.permissions import BasePermission import randomclass MyPerssion(B…

傅里叶级数公式及其收敛问题

文章目录 abstract函数展开成傅里叶系数傅里叶系数求解 a 0 a_0 a0​求解 a n a_n an​求解 b n b_n bn​小结 傅里叶级数🎈周期为 2 π 2\pi 2π的函数的fourier级数展开公式小结三角级数收敛问题Dirichlet收敛定理例 abstract 傅里叶级数公式及其收敛问题介绍周期…

自动化运维中间件架构概况

自动化运维中间件架构概况 kubernetesjenkins 安装k8s后 设置 Jenkins 任务: 在 Jenkins 中创建一个新的任务: 配置源代码管理:选择 Git,并提供 GitLab 仓库的 URL、凭据和分支信息。配置构建步骤:选择 Maven 构建,…

集合的自反关系和对称关系

集合的自反关系和对称关系 一:集合的自反关系1:原理:2:代码实现 二:对称关系1:原理:2:代码实现 三:总结 一:集合的自反关系 1:原理: …