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

本文为学习小九大佬“从零到一建立组件库”专栏的学习精简笔记，并结合了其他文章，为开发组件库大项目并学习前端工程化撰写的查漏补缺的笔记。最后关于vuepress引入组件库方面输出自己的思考。

参考链接：

创建申明子项目（必要包含）

组件库项目、
- packages文件夹
  - components放置组件、
  - theme-chalk放置样式文件、
  - contants放置场景、
  - utils放置公共文件，
开发时预览项目用于调试、
- 一个example用于调试预览
开发文档项目（用于最终上线的文档）、
公共方法项目（用于抽离公共逻辑）

script的type为module，因为vite是基于es6 module的

一个完整的组件目录结构是

packages/components/button/
/__tests__/ 
/src/ 
/style/ 
/index.ts

一个完整的组件大概的目录是这样的，一个test用来写单元测试的、一个src是资源目录里面就是所有组件代码、同时src 目录下放置了我们代码组件和Ts的类型，也就是我们组件所用到的PropsType 一个style样式文件，和一个index.ts用于对文件的导出，

组件基础开发

我们可以将props和ts所需要的类型一起定义在这个文件， 需要注意的是buttonProps并不能直接用于type，需要使用vue自带的ExtractPropTypes进行包装，导出的才能是真正的类型，

样式

BEM规范：第一层就是我们的语义化名称，其次后面可以通过双下划线或者双中划线来进行定义，我们称之为修饰符，比如上面双下划线进行定义修饰位置，双中划线修饰状态为是否选中，在有些场景也会使用is-checked类似的is语法修饰状态

样式整体设计

定义一套全局变量供所有组件使用
定义一整套mixin方法将公共样式逻辑进行封装整理
定义好命名空间，防止组件库的样式与外层命名冲突

theme-chalk
├── src
│   ├── common
│   │   ├── transition.scss
│   │   └── var.scss
│   ├── font
│   ├── mixins
│   │   ├── config.scss
│   │   ├── function.scss
│   │   └── mixins.scss
│   └── button.scss
└── package.json

一个公共文件，
- 在common文件下放置全局动画，
- 和我们定义的所有变量
一个fonts
- 放置字体和
- 字体图标，
一个mixins放置抽离的方法，
- 配置文件，比如命名空间，连接符，prefix等等
- 定义所有公共的样式方法和一些自定义函数用于所有组件使用其他的呢就是不同的组件单独的一个样式文件

![[Pasted image 20230211235126.png]]

开源发布组件到 npm

配置 .npmignore 文件

src
public
tests
复制代码

发布

发布前，需要确保 package.json 中这些字段。

name

它是发布到 npm 上的包名，也是安装时的包名。请保证它的唯一性，可以到npm上先搜索一下，是否已经存在。

version

版本号，遵守语义化版本规则。每次新发布都要进行更改。可以使用 npm version [major.minor.patch] 命令来执行更新。

main

是包的入口。

npm addUser # 如果没有用户名就注册一个，否则直接登录
npm login # 登录，输入密码
npm publish # 发布，zyl-ui根目录下执行

等过一会儿，就可以到 npm 上搜索你发布的包。接下来你就可以 npm install zyl-ui 安装并使用你自己的组件库了。

作者：zhangyanling77
链接：juejin.cn/post/684490…

vuepress引入

非npm开源发布组件

如果您的组件库不是发布在 npm 上的，您可以通过以下两种方法引入到 VuePress 中：

通过 CDN 引入：

您可以在页面的 HTML 文件中通过以下代码引入 CDN 资源：

htmlCopy code

<script src="https://your-server-url/your-component-library.js"></script>

通过本地引入：

您可以将组件库文件下载到本地，然后通过以下代码引入：

javascriptCopy code

import YourComponent from './your-component-library.js' export default { components: { YourComponent } }

以上两种方法都可以帮助您引入不发布在 npm 上的组件库到 VuePress 中。

最后采取的方法

借鉴vant的做法，在文档站里嵌iframe 组件库App.vue进行对应

<script lang="ts" setup>
const type = ref()

v-if type == "btnAble"

怎样建立组件库的笔记 | 青训营笔记