搭建组件私有仓库

Git仓库当私有npm


我们通常通过 npm 来安装和使用开源的库。
但是,通常我们有些私有的模块,更新不频繁,不想通过npm发布,但是又想在多个项目中使用,同时我们不想将组件库复制到各个项目中来使用。而且一旦公有模块更新,我们也不能及时更新。

利用现有的git,既不用搭建私有的npm私有仓库,又能满足上面的需求,它做为一个快速解决方案, 后期是可以慢慢过渡升级到使用完整 npm 私有仓库
项目地址:http://[ip]/wonders-ui

私有组件库搭建


安装

"@wonders-ui/mobile": "git+http://[ip]/wonders-ui/mobile.git"

使用

import Vue from 'vue'
import wondersUI from '@wonders-ui/mobile'
Vue.use(wondersUI)

注意

不好的地方是,使用 npm update / yarn 是无法更新这个@wonders-ui/mobile",想更新只能重新安装一次,或者使用下面命令。

yarn add git+http://[ip]:[password]@[ip]/wonders-ui/mobile.git

管理组件库


@wonders-ui/web使用storybook来管理组件库

image.png

简述

  1. 可以帮助构建 UI 组件,组合组件,说明文档,测试和部署 UI 组件的工具,与业务功能隔离开来,专注于开发组件。
  2. 支持框架 React,Vue等
  3. 提供丰富的插件供开发使用,比如docs可以生产组件参数说明(参数描述,参数定义,支持的类型等), knobs 帮助您在隔离构建UI组件时 可以动态地修改组件的参数来验证交互; notes可以展示你的md文档; addon-storysource可以直接在页面看到你的源码;一键生成所有截图的Storybook Chrome Screenshot Addon。这些社区的addons都非常实用。感兴趣可以自己增加
  4. 支持模拟不同设备下的组件
  5. jest自动化测试组件还有依靠视觉,快照和视觉回归测试
  6. 灵活度很高,如果想使用js/ts,css,/scss/styled-components, redux 都是可以的,在其他组件库基础上进行二次开发,需要自行配置项目

运行

  • git clone
  • yarn
  • yarn storybook
posted @   戎码1生  阅读(156)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示