组件库项目搭建

已于 2023-03-15 21:32:52 修改
阅读量402 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 技术 文章标签： vue.js javascript 前端
于 2023-03-15 21:09:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rotating_windmill/article/details/129568463
本文档详细介绍了如何从创建项目开始，逐步构建一个Vue.js组件库。内容包括删除不需要的文件，配置pnpm-workspace.yaml，创建并配置demo项目，处理packages项目，添加公共依赖，打包并发布组件到npm，以及在demo项目中测试组件。整个过程涵盖了Vite、TypeScript、pnpm等工具的使用。

创建项目

使用pnpm create vite@latest 命令创建项目。
在这里插入图片描述
输入项目名，选择对应参数。
在这里插入图片描述

删除不需要的文件

在这里插入图片描述

添加pnpm-workspace.yaml

在项目根目录下创建一个pnpm-workspace.yaml文件，配置如下：

packages:
   - demo # 存放组件示例代码
   -
了解本专栏 订阅专栏 解锁全文 超级会员免费看
(源码)基于VitePress框架的组件库搭建教学项目.zip
04-19
本项目是基于VitePress框架的组件库搭建教学项目，涵盖了组件库搭建的多个关键环节，如配置TSX支持、创建VitePress文档、开发CLI工具以及按需打包配置等内容，能帮助开发者学习组件库搭建的完整流程。 ## 项目的...
Vue cli3 库模式搭建组件库并发布到 npm的流程
10-17
- **Vue CLI 3**：新版的 Vue 脚手架工具，能够帮助开发者快速搭建项目，并提供了库模式以方便创建和打包组件库。 - **npm**：作为前端社区最常用的包管理器之一，npm 将成为我们的组件库发布的平台。 - **Webpack**...
组件库搭建（一）
qq_39465116的博客
04-01 1117
第一步：使用vue脚手架初始化项目 第二步：创建package文件夹，我们之后写的自定义组件就放在package下，并且提供一个统一的入口。 第三步：编写组件库入口文件的代码。 根据使用element-ui的经验，组件的引入有两种方式 一、在main.js中导入组件库,并且使用Vue.use()方法将组件挂载在全局对象上。 import ElementUI from "element-ui"; Vue.use(ElementUI); vue.use方法会调用install方法（这个方法的第一
从零开始搭建一个属于你自己的组件库！
程序员成长指北
08-15 1357
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群之前发过一篇搭建组件库文章使用 Vite 和 TypeScript 从零打造一个属于自己的 Vue3 组件库两篇文章可以结合一起学习组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子...
pnpm monorepo+vue3+vite组件库搭建
weixin_43719925的博客
03-21 3001
pnpm 是 performant npm（高性能的 npm），它是一款快速的，节省磁盘空间的包管理工具，同时，它也较好地支持了 workspace 和 monorepo，简化开发者在多包组件开发下的复杂度和开发流程。pnpm 为 performant npm 的简称，意为高性能的 npm。
组件库系列一：搭建自己的组件库
weixin_51670675的博客
03-31 4701
组件库系列文章，从头搭建组件库，发布组件库文档并上传npm。分享组件搭建的思路和遇到的坑。
从零搭建一个组件库 -- 项目搭建
Wannaer的博客
04-13 1396
从零搭建一个 vue3 组件库
教你搭建按需加载的Vue组件库(小结)
10-16
通过上述步骤，我们就可以搭建一个按需加载的Vue组件库，从而提高项目的加载速度和运行效率。总的来说，按需加载的组件库不仅能够提高大型项目的性能，也能够减少用户在使用过程中的等待时间，提升用户体验。在实际...
精选资源
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
vue3前端组件库的搭建与发布（一）
qq_38133850的博客
09-19 2404
最近在做公司项目中，有这么一件事情，很是头疼，就是同一套代码，不同项目，要改相同bug，改好多遍，改的都想吐，于是就想做一个组件库，这样更新一下就全都可以了，当然也是第一次主导组件库的搭建，有哪些不对的，还请各位大佬指出来哈。
从零搭建一个组件库（一）项目环境搭建
volit的博客
01-23 2741
组队大项目选择了组件库开发，一开始决定选题时候，大家都觉得这个题目会很难写，等到实际上手开发的时候，才发现这个项目确实没那么好写。开发组件库的第一步就是要确定组件库的整体架构和技术选型，这方面我主要参考了Element-plus。架构方面使用基于pnpm实现的monorepo架构，对项目的代码进行组织和管理；css预处理器选择了Sass，定义了classname的BEM规范、cssvar变量的一系列utils和一些其他的样式处理工具；测试工具采用vitest；组件库文档采用vitepress。
（二）手把手搭建组件库(工具配置篇)（持续更新）
最新发布
qq_66175795的博客
12-25 978
配置eslint以及husky用于规范代码
（一）手把手搭建组件库(环境篇)（持续更新）
qq_66175795的博客
12-24 849
Vue+ts+vite+element-plus二次开发组件库
Vue.js组件库的搭建入门篇
qq_63055262的博客
10-24 551
Vue.js是一款用于构建用户界面的渐进式JavaScript框架。它的核心库只关注视图层，并且非常容易学习。本文将介绍如何搭建一个Vue.js组件库，包括创建项目、编写组件、发布组件等步骤。本篇介绍了从零开始搭建一个 Vue3 组件库的第一步，完成了一个最简单的组件库项目，并且能够打包。同时还介绍了三个 Lint 工具的装配，以及如何实现提交规范化及自动格式化代码。尽管我们没有真的发布到 npm 上，不过我们如果想试试的话，可以使用 link 协议在本地的其他项目上试一试。同样用创建一个项目，在的。
从零开始搭建一个组件库（一）
业余丰富各种技术栈
09-11 721
从零开始搭建一个组件库
从0到1搭建组件库
m0_66439275的博客
02-08 1021
从实现项目基本架构 -> 支持多规范打包 -> 实现按需加载 -> 发布 npm 包，带你从 0 到 1 搭建组件库
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
05-11 1947
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
快速上手搭建VUE组件库
wbw1021的博客
06-16 3225
首先声明玩法很多，这里只做一个适合快速上手搭建VUE组件库的讲解。然后是基于vue2的，且集成了组件库使用文档模块。
手把手，如何搭建一个通用组件库？（文档+样式+按需打包
大灰狼的小绵羊哥哥的博客
04-22 2811
到这里，一个通用的组件库基本算是搭建完成了，也能发布上线使用了。但是要真正封装出一个好用的ui组件库，还是有很多细节需要实现。举几个例子1.element-plus支持手动按需导入<template></script>复制代码他的入口文件，并没有把每个组件都打包进去。2.组件开发过程中的相互引用在组件开发过程中，如果存在组件相互引用，那么我们最好的方式是开发的时候引用本地，打包上线的时候引用的是对应的模块。这个就涉及到包模块管理了。3.element-plus的类型封装。
Java分布式项目搭建详解
"本文介绍了使用Java实现分布式项目搭建的步骤和相关概念，包括分布式系统的基本定义、分布式与集群的区别，以及如何准备工具并创建父类Maven项目进行版本管理。" 在Java开发中，构建分布式项目是为了提高系统的可...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

河马开源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值