这是我参与「第五届青训营 」伴学笔记创作活动的第8天

前言

这篇文章时我在拉取队长项目后做的一些准备工作，是对项目结构的梳理，我觉得也值得记录，分享给大家。

使用pnpm，因为之前只使用过npm，所以第一次安装依赖的时候失败了 所以这里要先学一下pnpm，还要安装pnpm（npm install pnpm -g）

这个安装的东西也在提示你项目所需要的东西，架构

项目结构： 采用vite+vue+TS完成

2023.1.23 现在最重要的是学TS语法，还有各种规范再去写，还有就是看看源码

如何做

接下来还要看list的源码，看看别人是怎么写的，ant和ElementUI

目前来看，大致的东西梳理清楚了 1.在package的components里面创建组件文件夹（List） 2.在此文件夹里面建立src文件夹构造组件（scss，vue，ts，大致知道，但是不会写，里面的东西还没有弄清楚，只知道ts会产生模块，ts是导出东西，然后要在vue里面使用） 3.在List文件夹里创建index.ts,这个是用来注册组件，然后导出组件（对照着写），这里也会命名组件什么的KLlist。 4.在kunlun-design的component.ts里面导出打包配置

这四个都是互相作用的，用来打包的，感觉这块是不是我可以不用懂

5.Kunlun的库是在play的main.ts里面被导入的，然后所有的组件就都可以使用了（所以前面的那些工作都要配置好）

项目结构分析

packages文件夹存放我们开发的包 （包括kunlun组件库）

examples（我们项目叫play）用来调试我们的组件（就是vue3完成的组件展示页面在这，里面的kunlun组件库是导入的）使用vite搭建一个基本的Vue3脚手架项目

为了我们各个项目之间能够互相引用我们要新建一个pnpm-workspace.yaml文件将我们的包关联起来

packages:
    - 'packages/**'
    - 'examples'
复制代码

这样就能将我们项目下的packages目录和examples（play）目录关联起来了，当然如果你想关联更多目录你只需要往里面添加即可。

utils包：一般packages要有utils包来存放我们公共方法，工具函数等

components是我们用来存放各种UI组件的包

docs是用来建站的

项目规范依赖（这个必须要了解，不然提交不了）：

git规范、eslint、StyleLint还有husky

如何规范git commit提交 - 较瘦 - 博客园 (cnblogs.com)

我的仓库名： 'github.com/jiale233/Ku…'

负责

目前我负责列表list 但是我觉得做table也挺好的 更好做，如果后面没人做我也来自做这个吧

目前我要学的前期的东西有很多，主要有哪些呢，罗列一下，一个个去学，并搭配好配套的资料，然后再开始： 1.组件库如何进行开发 参考视频：(www.bilibili.com/video/BV1nJ…)

参考文档：(使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库 - 掘金 (juejin.cn))

( vue组件封装_耳鼻喉科魏主任的博客-CSDN博客)

估计还是借鉴别人的，包括css代码什么的

3.各种我不知道的知识，具体操作