全网最细使用Vite搭建一个组件库

主要观点总结

文章介绍了基于Vite搭建的前端组件库开发流程，包括目录结构、修改操作、打包配置、开发文档等。

关键观点总结

关键观点1: 使用Vite搭建基础版本脚手架并改造目录结构。

文章首先介绍了使用Vite搭建前端组件库的基础步骤，包括初始化项目、安装依赖、配置目录结构等。

关键观点2: 修改和配置项目细节。

文章详细描述了如何修改和配置项目的细节，包括修改src为packages、删除不必要的文件夹、修改index.html中的script标签路径等。

关键观点3: 打包配置和输出设置。

文章介绍了如何配置打包输出，包括output的配置、cssCodeSplit的修改、ts类型标注的打包等。

关键观点4: 开发文档和组件库的自动引入。

文章还介绍了如何开发文档和使用VitePress生成文档，以及如何实现组件库的自动引入。

关键观点5: 本地测试组件库和其他相关工具的使用。

最后，文章提到了本地测试组件库的工具yalc和使用方式，并给出了相关的github地址和推荐阅读。

文章预览

点击上方  前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 准备工作 先使用vite 搭建基础版本脚手架这里不做讲解、由于vite初始化什么都没有安装、我采用了自己改造过的脚手架 详情见GitHub 内置 vue-router、commitlint、stylelint、eslint、prettier、unplugin-vue-components、unplugin-auto-import、lint-staged、sentry、pinia、husky... 基本上可以满足团队日常开发需求。 😅言归正传、生成目录大概是这样的 ├── README.md ├── commitlint.config.cjs ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ ├── version.txt │ └── vite.svg ├── src │ ├── App.vue │ ├── api │ │ └── index.ts │ ├── assets │ ├── auto-imports.d.ts │ ├── components │ ├── components.d.ts │ ├── global.d.ts │ ├── hooks │ ├── intercept.ts │ ├ ………………………………