这是我参与「第五届青训营 」伴学笔记创作活动的第17天
前言
这篇文章时我在拉取队长项目后做的一些准备工作，是对项目结构的梳理，我觉得也值得记录，分享给大家。
[昆仑组件库的网址：](Kunun Design | Kunun Design (anixuil.github.io))
项目下载下来三件事
1.pnpm install
安装依赖 然后就可以进行开发
2.pnpm build
对项目进行打包
3.pnpm prettier
格式化代码
语法检查，确保符合规范
4.pnpm run play dev
运行测试
使用pnpm，因为之前只使用过npm，所以第一次安装依赖的时候失败了 所以这里要先学一下pnpm，还要安装pnpm（npm install pnpm -g）
这个安装的东西也在提示你项目所需要的东西，架构
项目结构： 采用vite+vue+TS完成
项目要求
问题：
使用组件时显示没有此组件，按照队长的方式一路注册下来，该写的都写了可是就是不行，看了play引用的是package里面的包，不知道问题出在哪里
问题解决：
自己查还是太慢，一个项目最熟悉的人还是写这个项目的人，一开始它看没有看出来，最后开腾讯会议看就方便多了（ps：现在腾讯会议也可以直接控制电脑，方便多了）。
他发现问题在于引用的这个包是打包的好的包，并不是直接使用的package里的components文件夹里的组件，是用的打包后的KLdesign-vue的这个打包好的包，所以当我手动添加了（这也是我一直卡的原因，那就是这个是我手动添加的，并不是新打包的，所以没有响应）。在这个时候，我们运行打包命令（有什么命令去package.json文件里去看script脚本命令，就表示你可以执行什么命令，所以这个package.json要好好了解），再执行play就可以响应到你写的包了
模仿element-ui封装vue组件库（一）_耳鼻喉科魏主任的博客-CSDN博客
这篇文章看完，我想对于组件注册可以有更多的了解。
模仿element-ui封装vue组件库（六）_耳鼻喉科魏主任的博客-CSDN博客
如何做
接下来还要看list的源码，看看别人是怎么写的，ant-design-vue，因为它有list这个组件。
目前来看，大致的东西梳理清楚了
1.在package的components里面创建组件文件夹（List）
2.在此文件夹里面建立src文件夹构造组件（scss，vue，ts）
3.在List文件夹里创建index.ts,这个是用来注册组件，然后导出组件（对照写），这里也会命名组件什么的KLlist。
4.在kunlun-design的component.ts里面导出打包配置
kunlun-design的包结构
这四个都是互相作用的，用来注册并打包的
Kunlun的库是在play的main.ts里面被导入的，然后所有的组件就都可以使用了
项目结构分析
packages文件夹存放各种包 （包括kunlun组件库的源码和包、文档站、测试、utils，等等）
examples（我们项目叫play）用来调试我们的组件（就是vue3完成的组件开发测试在这）
主要用到的是这两个
为了我们各个项目之间能够互相引用我们要新建一个pnpm-workspace.yaml文件将我们的包关联起来
packages:
- 'packages/**'
- 'examples'
复制代码
这样就能将我们项目下的packages目录和examples（play）目录关联起来了，当然如果你想关联更多目录你只需要往里面添加即可。
package文件夹
utils包：一般packages要有utils包来存放我们公共方法，工具函数等
components是我们用来存放各种UI组件的包
docs是用来建站的
项目规范依赖（这个必须要了解，不然提交不了）：
git规范、eslint、StyleLint还有husky
如何规范git commit提交 - 较瘦 - 博客园 (cnblogs.com)
负责
目前我负责列表list
目前我要学的前期的东西有很多，罗列一下，一个个去学，并搭配好配套的资料，然后再开始： 1.组件库如何进行开发 参考视频：(www.bilibili.com/video/BV1nJ…)
参考文档：(使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库 - 掘金 (juejin.cn))
