组件库开发
组件库开发
环境搭建
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 (已全局安装lerna) 1、初始化 1.1 新建项目目录root 1.2 在目录root中使用pnpm初始化packages.json文件,新建 pnpm-workspace.yaml文件, packages/文件夹 pnp…...
【python基础】魔法参数*args, **kwargs的使用
文章目录 前言一、*args 和 **kwargs 是什么?二、*args 的用法打包参数:将不定数量的参数传递给一个函数拆分参数:调用一个函数 三、**kwargs 的用法打包参数:将不定数量的参数传递给一个函数拆分参数:调用一个函数 四…...
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",它是一个Linux操作系统的安全增强功能。SELinux是一个强制访问控制(Mandatory Access Control,MAC)系统,它在操作系统级别提供了更加精细的访问控制和安全策…...
项目级asp.net框架的LIMS实验室管理系统源码
LIMS可用于管理完整的实验程序,从样品登记到检验、校核、审核到最终批准报告,建立在过程质量控制的基础上,对检测流程进行有效全面的管理,对影响质量的人、机、料、法、环因素加以控制,同时为质量改进提供数据依据。进…...
pthread 变量静态初始化 避免使用被销毁过的变量
pthread 变量静态初始化 互斥锁:pthread_mutex_t g_mutex PTHREAD_MUTEX_INITIALIZER;读写锁:pthread_rwlock_t g_rwlock PTHREAD_RWLOCK_INITIALIZER;条件变量:pthread_cond_t g_cond PTHREAD_COND_INITIALIZER; 适用场景 以互斥锁为例…...
深度学习之基于ResNet18的神经网络水果分类系统
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介二、功能三、神经网络水果分类系统四. 总结 一项目简介 基于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接口设计、强大的路由和安全功能等特性,可以为车载和移动应用提供稳定可靠的无线数据连接。 链接直达:https://www.key-iot.com/iotlist/sv900.html ### 产品特性 5G车载网关最大的…...
高校教务系统登录页面JS分析——天津大学
高校教务系统密码加密逻辑及JS逆向 本文将介绍天津大学教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文,你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习,勿用于非法用途。 一、密…...
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 前言 工具根据商用密码应用安全性评估量化评估规则(2023年8月1日实施)实现 0x02 工具功能介绍 给定D A K的打分结果,计算单个测评对象和测评单元得分。根据测评单元得分计算测评层面得分根据测评层面得分计算报告整体得分配置文件说明…...
人工智能常用网站
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.连击 第一次攻击: 第一次攻击,…...
葡萄酒是如何从葡萄园到你的酒杯的?
根据定义,我们称葡萄酒的美味花蜜是葡萄酒精发酵的产物。也有果酒,或乡村酒,是由发酵的水果制成的。然而,传统意义上的葡萄酒是由酿酒葡萄制成的。好吧,一切都是在几个步骤中完成的,来自云仓酒庄品牌雷盛红…...
Oracle Exadata X7-2掉电宕机导致集群无法启动处理过程
文章目录 前言一、当前的状态是什么?二、集群启动异常怀疑对象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 前言 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、…...
Python之循环语句
循环普遍存在于日常生活中,同样,在程序中,循环功能也是至关重要的基础功能。 循环在程序中同判断一样,也是广泛存在的,是非常多功能实现的基础 while循环的基础语法 生活中的循环 程序中的循环 只要条件满足 会无限循…...
python中使用websocket调用、获取、保存大模型API
笔者最近在测试星火大模型的时候,他们是使用websocket 来建立对话,而且星火大模型开放的测试代码,质量上不咋地(20231030记录),还需要对websocket有一定的了解,才适合自己微调。 安装ÿ…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
