使用vue3+ts实现组件库并发布到npm（会持续更新）

最新推荐文章于 2025-10-27 08:19:10 发布
原创 最新推荐文章于 2025-10-27 08:19:10 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

实习博主分享个人经验，创建轻量化组件库，包含分页组件的自动化布局与数据传递选项，以及可定制弹窗的设计。探讨按需引入难题与发布注意事项。

博主目前已在一家公司实习，技术总监挺厉害的源代码也都公开，使用的技术也比较新，学习了一段时间过后想自己写一点插件之类的。

目前个人计划是先做一个组件库，再做一个页面栈管理的插件。先说说组件库，个人并不打算像ant-design和element-ui那样把所有的常用的页面组件写出来，没有太多必要而且也肯定是远不如这些成熟的组件库的，所以个人的想法是，补盲。目前对这个组件库的内容想法就是一个分页组件，还有一个弹窗的组件。这些都是我个人在实习中遇到的，在我自己实习做的项目由于是商用项目是比较少使用到这些第三方组件，更多的是技术总监自己写的一些组件（使用原生）以及设计师提供的素材。

对于分页组件，想法是让他自动化分页，根据传递的数据总条数、所要展示的页数以及每页的条数来进行自动化排版布局（这里看不懂没关系，已实现好下一篇文章会详细讲解如何使用，后续也会开源并写文档），以及附加功能（可用可不用，对使用者会有数据泄露的风险哈哈哈）：就是可以将所有数据传递进去，点击页面转换可以自动把目前页数对应的数据返回给使用者，貌似现在有些都是懒加载了对于数据量大的情况，想到这我还得加上一个返回当前页数的功能。样式方面我会把一些class写在文档上，使用深度选择器可以去修改，目前都是用vh来布局。

对于弹窗，想法是可以将所有的自定义组件弹出来，而没有固定的条条框框，这个后续会去弄一下

目前这个组件库是已经发布了，还在测试版本

下面讲一下遇到的问题：

1.按需引入，这个还没实现，昨天才开始做这个东西，查一下需要babel插件，但我的组件库是精简版的或许还不需要？所以目前使用只能全局引入

2.发布时的一些问题

package.json需要配置一下

"name": "windslayer-ui",//这个尽量要特别一点，不然很可能会因为重名而不能发布
  "private": false,
  "version": "1.0.2",//每次更新都要改版本号
  "description": "wind-ui,个人以自己工作项目经验需求而实现的组件库",
  "author": "Wild-Wind",
  "license": "ISC",
  "main": "./src/components/index.ts",//这个是import时的入口，必须写好

 

npm【一】---vue3+vite+ts 发布、更新自定义组件到npm仓库
weixin_43966973的博客
04-26 1052
本示例使用npm7+ 版本。
Vue3 + Vite 构建组件库发布到 npm
白雾茫茫丶
04-09 3408
这篇文章介绍了如何使用Vue3和Vite构建组件库并发布到npm，包括初始化项目、配置项目结构、创建组件目录、设置入口文件以及导出组件等步骤。
发布vue3组件到npm
每天都要努力学习哦~~
10-13 3401
当你开发Vue 3应用程序时，有时你可能会需要将自己创建的组件发布到npm上，以便其他开发者可以轻松地在他们的项目中使用这些组件。本文将指导你如何将Vue 3组件发布到npm。
Vite搭建Vue3 + TypeScript 项目(NPM)
HUMM
11-04 1270
NPM搭建Vite + Vue3 + TypeScript 项目
Vue3 自定义公共组件开发与复用全攻略
最新发布
Rysxt_的博客
10-27 814
​​如何创建Vue3公共组件​​：从设计到实现的完整流程​​组件设计最佳实践​​：包括props、事件、样式的设计原则​​本地测试方法​​：确保组件在集成前正常工作​​组件库构建与发布​​：将组件打包并发布到npm​​组件复用策略​​：在多个项目中高效使用公共组件。
vue3+ts组件库发布npm并实现按需引入
junner443的博客
06-20 4318
vue3+typescript组件库发布npm包，并实现按需引入功能（付源码及组件库实现基础原理浅析）
vue3+ts开发组件上传到npm全过程
czl0325的专栏
09-02 2281
以下是我摸索的步骤，但是不是完美的，不知道有没有人有更完美的步骤呢？可以指点下，我的qq是295183917 1.新建项目 vue create 项目名 新建一个工程，选择vue3和typescript 2.创建组件 在components文件夹下创建组件，用vue3+ts的写法，这个我具体不写了。同时创建一个index.ts文件作为入口文件 2.1 扩展知识点 我这个库依赖了vant的库，我们可以npm i vant@next -D安装vant 注意是-D不是-S，就是打包的时候不打包.
vue3+ts+vite 发布vue组件到npm包
木贝西的博客
03-01 2123
vue3+ts+vite发布组件到npm 系统环境 vue:3.2.6 vite:2.5.4 ts:4.3.2 创建项目 npm init vite@latest 模板选择vue、vue-ts 编写组件 打开项目 在src/components文件夹下新增文件,我这里叫TestPub.vue 编写代码如下 <template> <button class="testButtonClass">我是测试要发布的按钮组件</button> &l
vite+vue3+ts发布组件库npm
qq_41049913的博客
08-13 973
【代码】vite+vue3+ts发布组件库npm。
精选资源
在vue3+ts+setup语法糖中使用图片预览组件
09-14
接下来，为了在Vue3中实现图片预览，我们可以使用现有的图片预览库，如`vue-preview`。首先，确保你已经安装了Vue3兼容的版本，可以通过以下命令进行安装： ```bash npm install vue-preview@next --save # 或者...
自己封装 vue3+ts 组件库并且发布到 NPM
Joey_Tribiani的博客
09-14 1162
因为我们如果直接在 vue 组件的 style 标签里面写的样式，这些 css 代码是会被 vue 打包的，最终会变成类名假属性的选择器，因此不生效，解决方案就是用单独的 css 文件去写，然后其他项目在用的时候直接引入这个 css 文件即可。使用命令直接打包，然后打包的文件会存放在 dist 目录，由于我们已经在 package.json 里面配置了 files 属性只想了 dist 目录，因此我么只需要使用。我们简单的封装一个自己的组件和对应的一些方法，我的做法是直接在项目的根目录下面创建。
Vue3项目如何使用npm link本地测试组件库
wocwin的博客
07-09 1002
Vue3项目如何使用npm link本地测试组件库
Vue二次封装组件并发布到npm仓库
sunwanfulove的博客
12-27 1930
Vue二次封装组件并发布到npm仓库，快速上手npm。
vue3+vite+ts 发布、更新自定义组件到npm
FenceRain的博客
11-17 3237
1、根目录下创建packages目录作为组件的开发包，目录下的index.ts文件作为整个组件库的出口文件，导出组件。2、编写组件，创建packages/Button目录，在该目录下创建Button.vue和index.ts文件。1、需要先在npm官网注册自己的npm账户，链接：https://www.npmjs.com/5、上传包，没有报错就是上传成功了，可以登录npm查看到自己的包。3、如果样式没有加载就在main.ts中导入组件的样式文件。2、查询是否已存在包名，可以在npm官网查，也可以使用。
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3924
Vite+Vue3+Ts+sass+Router+pinia+axios,Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
vue3创建项目与创建ts项目
SheepOnTheCloud的博客
07-18 314
vue3创建项目与创建ts项目
【VUE+TS】1.0 Vue3.0+TS打造企业级组件库
我睡醒刚刚
07-20 238
目的 使用vue单元测试库保证代码质量 开源项目的开发发布流程 设计合理的设计广泛适用的API 如何保证代码质量 vue3的实现原理 表单组件库 高频场景 交互复杂 定制型高 涉及到数据(校验)安全 学习优点 代码质量高 适应场景丰富 开源维护参与 完善的发布流程 源码(响应式原理) 核心功能 表单生成 主体系统 插件系统 和其他表单组件库的区别 无需编写代码：由json负责组装...
Vue3+TS+Vite开发组件库并发布到npm
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
06-08 6227
Vue3+TS+Vite开发的UI组件库，并已发布到npm，其中包含35个常用组件和9个常用工具函数，持续更新中...
Vue3+TypeScript+Vite开发组件库并发布到npm
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
02-22 5038
Vue3+TS+Vite开发的UI组件库，并已发布到npm。包含组件：面包屑、按钮、走马灯、级联选择、多选框、折叠面板、倒计时、日期选择、对话框、分割线、空状态、图片、数字输入框、全局提示、信息提示、通知提醒框、分页器、进度条、二维码、单选框、评分、选择器、滑动输入条、加载中、步骤条、触摸滑动插件、开关、表格、标签页、文字滚动、时间轴、文字提示、播放器、瀑布流
vue3-jsonschema：vue3 + ts的组件库
07-11
<think>我们正在寻找一个适用于Vue 3和TypeScript的JSON Schema组件库。根据引用[2]和引用[3]，我们可以了解到开发一个独立组件库的基本流程，但用户的需求是寻找现有的组件库，而不是自己开发。 在Vue生态中，处理JSON Schema的表单生成库中，比较知名的是`Vue Formulate`（已更名为`VeeValidate`和`Vue Form`的整合）和`FormVueLate`。但是，更符合JSON Schema标准且支持Vue 3的库是`Vue Formulate`的下一代版本或`Vue 3`的替代品。目前，有一个专门为Vue 3设计的JSON Schema表单库：`Vue 3 JSON Schema Form`。 然而，需要注意的是，Vue 3的生态中，有一个叫做`naive-ui`的组件库，它虽然不是一个专门处理JSON Schema的库，但它提供了强大的表单组件，可以结合JSON Schema使用。另外，还有`Element Plus`，它是Element UI的Vue 3版本，同样可以用于构建表单，但需要自己根据JSON Schema来动态生成表单。 专门针对JSON Schema的库有： 1. `vue-json-schema-form`: 一个为Vue 3设计的JSON Schema表单生成器。 2. `form-generator`: 一个基于Vue的表单设计器，支持JSON Schema，但需要确认是否支持Vue 3。 根据引用[2]中提到的，我们可以通过构建流程来创建自己的组件库，但用户的需求是寻找现有的，因此我们推荐现成的解决方案。 经过搜索和了解，目前比较活跃且支持Vue 3和TypeScript的JSON Schema组件库是： - `@vueform/vueform`: 这是一个专为Vue 2和Vue 3设计的表单生成器，支持JSON Schema，并且有详细的文档。 - `vform3-build`: 基于Element Plus的Vue 3表单设计器，支持JSON Schema。 但是，请注意，这些库的具体使用需要查看其文档和示例。 另外，引用[3]提到，搭建组件库的基础开发环境包括组件库的开发和打包、文档的开发和打包、命令行工具cli。如果用户需要自己开发，可以参考引用[4]中的脚手架项目，但这里用户的需求是寻找现有的库。 因此，针对用户的问题，我推荐以下两个库： 1. **Vue 3 JSON Schema Form (VJSF)** 这是一个专门为Vue 3设计的JSON Schema表单渲染库。它支持TypeScript，并且可以直接使用JSON Schema来渲染表单。项目地址：https://github.com/lljj-x/vue-json-schema-form 2. **@vueform/vueform** 这是一个功能丰富的表单生成器，支持Vue 3和TypeScript，并且使用JSON Schema来定义表单。它提供了多种主题（包括Tailwind CSS等）和大量内置组件。项目地址：https://vueform.com/ 使用这些库，你可以通过定义JSON Schema来快速生成表单，并且它们都支持Vue 3和TypeScript。 下面是一个使用`Vue 3 JSON Schema Form`的简单示例： 首先，安装： ```bash npm install @lljj/vue3-form-antd # 或者使用其他主题，如element-plus npm install @lljj/vue3-form-element ``` 然后，在Vue组件中使用： ```vue <template> <VueForm v-model="formData" :schema="schema" /> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; // 根据你选择的主题导入 import { VueForm } from &#39;@lljj/vue3-form-antd&#39;; const schema = { type: &#39;object&#39;, properties: { name: { type: &#39;string&#39;, title: &#39;姓名&#39; }, age: { type: &#39;number&#39;, title: &#39;年龄&#39; } } }; const formData = ref({}); </script> ``` 对于`@vueform/vueform`，安装和使用如下： 安装： ```bash npm install @vueform/vueform ``` 在main.ts中引入： ```ts import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import Vueform from &#39;@vueform/vueform&#39; import vueformConfig from &#39;../vueform.config&#39; const app = createApp(App) app.use(Vueform, vueformConfig) app.mount(&#39;#app&#39;) ``` 在组件中使用： ```vue <template> <Vueform :schema="schema" /> </template> <script> import { ref } from &#39;vue&#39; export default { setup() { const schema = ref({ fields: [ { type: &#39;text&#39;, name: &#39;name&#39;, label: &#39;Name&#39;, }, { type: &#39;email&#39;, name: &#39;email&#39;, label: &#39;Email&#39;, } ] }) return { schema } } } </script> ``` 注意：`@vueform/vueform`使用的是自己的Schema格式，但同时也支持JSON Schema。 请根据项目需求选择合适的库。 相关问题： 1. 如何在Vue 3中动态生成表单？ 2. 除了JSON Schema，还有哪些表单生成方案？ 3. 如何将Element Plus与JSON Schema结合使用？</think>### Vue 3 + TypeScript 的 JSON Schema 组件库推荐 针对在 Vue 3 和 TypeScript 环境中处理 JSON Schema 的需求，以下是经过验证的解决方案： #### 1. **Vue 3 JSON Schema Form (VJSF)** - **核心能力**：专为 Vue 3 设计的 JSON Schema 渲染器，支持动态表单生成、数据校验和可视化配置 - **TypeScript 支持**：提供完整的 TS 类型定义 - **安装**： ```bash npm install @lljj/vue3-form-antd # Ant Design 主题 # 或 npm install @lljj/vue3-form-element # Element Plus 主题 ``` - **使用示例**： ```vue <template> <VueForm v-model="formData" :schema="schema" :ui-schema="uiSchema" /> </template> <script setup lang="ts"> import { VueForm } from &#39;@lljj/vue3-form-element&#39;; const schema = { type: &#39;object&#39;, properties: { name: { type: &#39;string&#39;, title: &#39;姓名&#39; }, age: { type: &#39;number&#39;, title: &#39;年龄&#39; } } }; const uiSchema = { &#39;ui:order&#39;: [&#39;name&#39;, &#39;age&#39;] }; const formData = ref({}); </script> ``` - **特点**：支持自定义组件、异步校验、条件渲染等高级功能[^2][^3] #### 2. **FormVueLate** - **轻量级解决方案**：纯 Vue 3 的 JSON Schema 表单生成器 - **TypeScript 原生**：完全用 TS 编写，提供优雅的类型推断 - **安装**： ```bash npm install formvuelate ``` - **核心优势**： ```vue <FormSchema :schema="schema" v-model="formData" /> ``` 支持通过 `SchemaFormFactory` 扩展自定义组件[^3] #### 3. **自定义组件库方案** 若现有库不满足需求，可参考以下架构自建（基于引用[2][^4]）： 1. 创建 Vue 3 + TS 项目： ```bash vue create my-schema-lib --preset vue3-ts ``` 2. 实现核心组件： ```vue <!-- src/components/JsonSchemaForm.vue --> <script setup lang="ts"> defineProps<{ schema: Object; modelValue: any; }>(); </script> ``` 3. 配置构建命令（package.json）： ```json { "scripts": { "build-lib": "vue-cli-service build --target lib --name vue3-json-schema ./src/install.js" } } ``` 4. 导出插件入口（src/install.js）： ```javascript import JsonSchemaForm from &#39;./components/JsonSchemaForm.vue&#39;; export default { install(app) { app.component(&#39;JsonSchemaForm&#39;, JsonSchemaForm); } }; ``` ### 选择建议 | 方案 | 适用场景 | 学习曲线 | |--------------------|---------------------------------|----------| | Vue 3 JSON Schema Form | 需要开箱即用解决方案 | 低 | | FormVueLate | 轻量级定制需求 | 中 | | 自定义开发 | 特殊业务场景/深度集成需求 | 高 | 对于大多数项目，推荐优先采用 **Vue 3 JSON Schema Form**，其完善的文档和活跃社区可加速开发。若需深度定制，可参考自定义方案结合 Vue CLI 的库构建能力[^2][^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值