当前位置: 首页 > news >正文

组件库开发

组件库开发

环境搭建

menorepo

  • pnpm
  • pnpm-workspace
  • lerna 7.4.2 (已全局安装lerna)

1、初始化

1.1 新建项目目录root

1.2 在目录root使用pnpm初始化packages.json文件,新建 pnpm-workspace.yaml文件, packages/文件夹

pnpm-workspace.yaml有这个文件表示开启工作区。

文件内容如下:

// root/pnpm-workspace.yamlpackages:- "packages/*"
// root/lerna.json{"version": "0.0.0","npmClient": "pnpm"
}

1.3 root/packages/文件夹中新增子项目,使用lerna create <button>创建button子项目。

​ 或直接新建对应文件夹以及其中的文件…

使用lerna create <button>创建的button子项目内容如下

root/||packages/||button/|__test__/  测试文件存放|src/  项目代码|index.vue|index.js 入口文件|packages.json|READEME.md

root/ packages/ button/ src/ index.vue 文件写入内容

<template><h1>this button component 123</h1>
</template><script>
export default {name: 'ls-button',setup() {}
}
</script>

root/ packages/ button/ index.js 文件写入内容

import Button from './src/index.vue'Button.install = function (app) {app.component(Button.name, Button)
}export default Button

导出该项目中的各组件。

root/ packages/ button/ packages.json 文件写入内容

{"name": "@liindata/ls-button",  // 注意这里的名字,下边要用的"version": "0.0.0","description": "> TODO: description","author": "zhangxm <zxumei.com>","homepage": "","license": "ISC","main": "index.js","directories": {"lib": "src","test": "__tests__"},"files": ["src"],"scripts": {"test": "node ./__tests__/button.test.js"}
}

1.4 新建 root/play/文件夹。这里用来启动服务,来测试组件或在这里编写组件库的示例文档等等等等

这里使用 vite 来配置开发环境

root/play/|src/|App.vue|main.js|index.html|vite.config.js 

root/ play/ src/ App.vue 文件写入内容

<template><h1>monorepo demo 1</h1><lsbutton></lsbutton>
</template>
<script setup>import Lsbutton from '@liindata/ls-button' // 这里引入我的</script>

root/ play/ main.js 文件写入内容

import {createApp} from 'vue'
import App from './App.vue'const app = createApp(App)app.mount('#app')

root/ play/ vite.config.js 文件写入内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()]
})

这时候准备工作已经ok!

2、依赖安装

经过第一步,肯定有很多疑问,比如使用了 vue、vite 但没有引入。

这里建议思考一下都要安装那些依赖,以及如何启动vite

2.1 安装依赖

安装 vite 
pnpm add vite -w
pnpm add @vitejs/plugin-vue -w -D
安装 vue
pnpm add vue -w

进入root/packages/button/中 执行命令, 把button 包软链到根目录。以便其它包使用…

pnpm link --dit ../../

执行后,在根目录 root/package.json 中

会自动添加 "@liindata/ls-button": "link:D:/work/liindata-ui-pnpm/packages/button"

完整内容如下。

{"name": "@liindata/root","scripts": {"play": "vite serve ./play" 这里配置root/play 为根目录启动vite},"dependencies": {"@liindata/ls-button": "link:D:/work/liindata-ui-pnpm/packages/button","lerna": "7.4.1","vue": "^3.3.7"},"devDependencies": {"@vitejs/plugin-vue": "^4.4.0","vite": "^4.5.0"}
}

pendencies": {
“@liindata/ls-button”: “link:D:/work/liindata-ui-pnpm/packages/button”,
“lerna”: “7.4.1”,
“vue”: “^3.3.7”
},
“devDependencies”: {
“@vitejs/plugin-vue”: “^4.4.0”,
“vite”: “^4.5.0”
}
}

执行 pnpm play 即可启动vite

相关文章:

组件库开发

组件库开发 环境搭建 menorepo pnpmpnpm-workspacelerna 7.4.2 &#xff08;已全局安装lerna&#xff09; 1、初始化 1.1 新建项目目录root 1.2 在目录root中使用pnpm初始化packages.json文件&#xff0c;新建 pnpm-workspace.yaml文件&#xff0c; packages/文件夹 pnp…...

【python基础】魔法参数*args, **kwargs的使用

文章目录 前言一、*args 和 **kwargs 是什么&#xff1f;二、*args 的用法打包参数&#xff1a;将不定数量的参数传递给一个函数拆分参数&#xff1a;调用一个函数 三、**kwargs 的用法打包参数&#xff1a;将不定数量的参数传递给一个函数拆分参数&#xff1a;调用一个函数 四…...

Android Icon 添加水印 Python脚本

源代码 # -*- coding: utf-8 -*- from PIL import Image 图片合成def mergePictureLXJ():commonIcon Image.open("icon.png")markIcon Image.open("领现金.png")markLayer Image.new(RGBA, commonIcon.size, (0, 0, 0, 0))markLayer.paste(markIcon, (0…...

选择Centos系统需不需要带SElinux?

CentOS 7的SELinux代表"Security-Enhanced Linux"&#xff0c;它是一个Linux操作系统的安全增强功能。SELinux是一个强制访问控制&#xff08;Mandatory Access Control&#xff0c;MAC&#xff09;系统&#xff0c;它在操作系统级别提供了更加精细的访问控制和安全策…...

项目级asp.net框架的LIMS实验室管理系统源码

LIMS可用于管理完整的实验程序&#xff0c;从样品登记到检验、校核、审核到最终批准报告&#xff0c;建立在过程质量控制的基础上&#xff0c;对检测流程进行有效全面的管理&#xff0c;对影响质量的人、机、料、法、环因素加以控制&#xff0c;同时为质量改进提供数据依据。进…...

pthread 变量静态初始化 避免使用被销毁过的变量

pthread 变量静态初始化 互斥锁&#xff1a;pthread_mutex_t g_mutex PTHREAD_MUTEX_INITIALIZER;读写锁&#xff1a;pthread_rwlock_t g_rwlock PTHREAD_RWLOCK_INITIALIZER;条件变量&#xff1a;pthread_cond_t g_cond PTHREAD_COND_INITIALIZER; 适用场景 以互斥锁为例…...

深度学习之基于ResNet18的神经网络水果分类系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介二、功能三、神经网络水果分类系统四. 总结 一项目简介 基于ResNet18神经网络的水果分类系统是一个利用深度学习技术进行水果图像分类的系统。下面是该系统…...

并查集易错点

并查集就俩核心点,1是找父节点,2是合并 1: return fa[x] x ? x : fa[x] find(fa[x]); 2. fa[find(a)] find(b) 第二步还挺容易写错的,左边是find(a)的根,而不是fa[a]...

车载网关产品解析(附:车载网关详细应用案例及部署流程)

5G车载网关是一款功能强大的工业级无线通讯设备。它集成了4G/5G双模网络模块、M12接口设计、强大的路由和安全功能等特性,可以为车载和移动应用提供稳定可靠的无线数据连接。 链接直达&#xff1a;https://www.key-iot.com/iotlist/sv900.html ### 产品特性 5G车载网关最大的…...

高校教务系统登录页面JS分析——天津大学

高校教务系统密码加密逻辑及JS逆向 本文将介绍天津大学教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习&#xff0c;勿用于非法用途。 一、密…...

68 内网安全-域横向PTHPTKPTT哈希票据传递

目录 演示案例:域横向移动PTH传递-Mimikatz域横向移动PTK传递-Mimikatz域横向移动PTT传递-MS14068&kekeo&local国产Ladon内网杀器测试验收-信息收集,连接等 涉及资源: PTH(pass the hash) #利用lm或ntlm的值进行的渗透测试 PTT(pass the ticket) #利用的票据凭证TGT进行…...

【1】2023版密评算分工具

0X01 前言 工具根据商用密码应用安全性评估量化评估规则&#xff08;2023年8月1日实施&#xff09;实现 0x02 工具功能介绍 给定D A K的打分结果&#xff0c;计算单个测评对象和测评单元得分。根据测评单元得分计算测评层面得分根据测评层面得分计算报告整体得分配置文件说明…...

人工智能常用网站

ModelScope - 模型列表页 https://huggingface.co/models...

OpenLayers实战,OpenLayers结合下拉菜单实现城市切换,动态切换城市边界到地图视图视角范围内

专栏目录: OpenLayers实战进阶专栏目录 前言 本章是OpenLayers综合实战案例,使用OpenLayers结合下拉菜单实现城市切换,动态切换城市边界到地图视图视角范围内。 本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染,通过动态创建s…...

UE5 日记(人物连招:蒙太奇动画通知(含视频链接))

教程https://www.youtube.com/watch?vsWpENaVGj2M&listPLiSlOaRBfgkcPAhYpGps16PT_9f28amXi&index10&ppiAQB 相关蓝图 连招逻辑 动画通知类 逻辑分析 1.用户输入 已搭载战斗系统模块,可以收到输入指令 2.连击 第一次攻击&#xff1a; 第一次攻击&#xff0c;…...

葡萄酒是如何从葡萄园到你的酒杯的?

根据定义&#xff0c;我们称葡萄酒的美味花蜜是葡萄酒精发酵的产物。也有果酒&#xff0c;或乡村酒&#xff0c;是由发酵的水果制成的。然而&#xff0c;传统意义上的葡萄酒是由酿酒葡萄制成的。好吧&#xff0c;一切都是在几个步骤中完成的&#xff0c;来自云仓酒庄品牌雷盛红…...

Oracle Exadata X7-2掉电宕机导致集群无法启动处理过程

文章目录 前言一、当前的状态是什么&#xff1f;二、集群启动异常怀疑对象1.排查心跳网络异常ping自己私有IP延迟高ping其它主机私有IP不通 2.是否发生过重启 三、日志信息收集ocssd.trc集群crs日志cell的griddisk状态及报错 四、IB交换机的问题排查处理五、紧急恢复业务在IB完…...

锐捷RG-EW1200G登录绕过漏洞复现

文章目录 锐捷RG-EW1200G登录绕过漏洞复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.复现 0x06 修复建议 锐捷RG-EW1200G登录绕过漏洞复现 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、…...

Python之循环语句

循环普遍存在于日常生活中&#xff0c;同样&#xff0c;在程序中&#xff0c;循环功能也是至关重要的基础功能。 循环在程序中同判断一样&#xff0c;也是广泛存在的&#xff0c;是非常多功能实现的基础 while循环的基础语法 生活中的循环 程序中的循环 只要条件满足 会无限循…...

python中使用websocket调用、获取、保存大模型API

笔者最近在测试星火大模型的时候&#xff0c;他们是使用websocket 来建立对话&#xff0c;而且星火大模型开放的测试代码&#xff0c;质量上不咋地&#xff08;20231030记录&#xff09;&#xff0c;还需要对websocket有一定的了解&#xff0c;才适合自己微调。 安装&#xff…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...