阅读本文后，您将有以下新的理解：
在通常的开发中，我们经常使用不同的UI框架。我不知道每个人是否都有为自己开发UI框架的想法。也许许多人认为无需重复轮子，但是现在前端工程师的要求越来越高。越来越多的技术堆栈。有必要学习此开发过程和一些解决方案。我认为最重要的是，在通常的项目开发中，UI框架无法涵盖许多组件。这与此业务相对束缚。这次，此组件需要更高的灵活性和易用性。有时，将现有的UI框架用于第二包装也很昂贵，甚至比开发更高。因此，您可以将常用的组件封装到UI插头中，并与完整的组件文档合作。无论是方便的未来项目迭代还是与他人共享，都非常好。
下面，模仿元素和官方网站的外观，以模仿UI框架来描述开发过程以及所使用的技术和解决方案。
仓库地址：https：//gitee.com/biluo_x/biluo- UI
NPM地址：BILUO -UI -NPM（NPMJS.COM）
除其他功能外，主零件还分为三个，左侧基于由组件分类的导航栏，中间的显示文档和右侧的文档目录。
首先查看左导航
一个组件对应于目录，我们需要对相同类型的目录进行分组，例如放置一个基本组件，一个表组件，等等。
查看主要文档
该项目使用VITE初始化，选择VUE3+TS模板，然后使用纱线使用纱线。特定的初始化将不丑陋。此外，我添加了代码的格式，JEST+@vue/test-Utils提供了测试支持（我懒得写两个或三个组件测试...）举起嘴。目录计划如下：
在组件文件夹下写一个UI组件。文件夹指示一个组件。在组件中，SRC存储组件文件，测试商店测试代码和index.ts提供默认指南。当然，组件文件夹下面有一个index.ts。
在这里，我们使用按钮组件的开发来显示基本的开发过程，并使用输入组件的开发来说明VUE3的更好开发方法。
按钮组件的文件夹结构
在按钮文件夹下的index.ts中，我们在src下公开两个组件：
这里选择了两个出口，主要是为了直接注册，同时也支持单独的参考。
如果您需要添加新组件，则可以导入此过程。LET查看按钮组件的特定开发：
该代码看起来很多，实际上非常简单。最多的是根据道具处理类名的过程。所有按钮的样式仅由CSS.JS仅在本机属性上处理。在分类中，我在哪里写了一堆三元表达式？后来，我发现元素源代码写了一个钩子来执行此操作。
此后，班级的后期名称是这样写的
开发非常简单，所以我无法重复。
为什么您要从此处取出输入组件并说出来，因为每个人都看到了上面的按钮的代码。该函数并不多，但是代码特别大且笨重。实际上，VUE3的开发方法并非如此。上述合并的开发合并在一起，这有点像以前的Vue2感觉。让我们看一下输入组件。使用元素的Friends应该知道，在打开输入组件后，将显示鼠标滑动按钮，并且将在滑动后隐藏。我们如何意识到此功能？实际上，这很简单。使用bool变量，然后监视鼠标的滑动和滑动事件。在这里我们选择封装为钩子，实际上，它是使用闭合
然后在Vue中引用
因为VUE3将响应函数封装在两个函数中：参考和反应性。与以前的VUE2不同，必须在具有相应的监视之前写入数据函数返回值。这使我们能够开发和封装更加灵活和更改。
基于对上方组件导航栏的分析，我们可以发现这是一条由多种类型组件的集合组成的大途径。简而言之，第一个级标题代表此分类下的所有组件。
最初，我计划将其设计成一个组，但是考虑到显示不同模块的显示的隐藏控制，它最终被设计为一个对象。您可以根据自己的实际情况自己处理。组件路由的类型如下
这是一个特定的设计
基本路由是普通VUE-ROUTER配置的类型
以基本组件路由为例，我们将所有基本路由文档放在这里。您可以看到这里引用的组件是一个MD文件，当我们等待特定操作时，我们将讨论它。需要在一般路由中显示的模块的密钥。
FasherKeys配备了需要显示的路由模块，该模块可以通过参数和伤害的顺序进一步控制导航。
我们上面提到的是，每个组件路由实际上是一个MD文件。要在VUE中分析MD。我们需要下载vite插头。
为什么要使用此固定版本，因为我当时下载的最新版本，因此有一个无法在MD文档中导入VUE组件的错误。通过解决了GITHUB问题解决了该问题的问题，但NPM没有更新。现在我不知道我是否不知道，但是我们不需要太多功能，此版本就足够了
接下来，我们将其配置在Vite配置文件中
这是Markdown-It-andor的插件。此插件的作用是在插件生成VUE组件时生成H标签的内容作为其ID，以便我们可以从目录跳到目录，以传输到目录跳转到目录到达目录到目录的目录跳到目录到目录到目录的目录跳转tospectify内容。如果您使用的是TS，请在环境中提供MD支持，将其文件类型定义为VUE组件
接下来，我们可以愉快地使用VUE和MD两条导入功能。vue Imports MD不会说太多。导入方法直接导入为组件。在MD中使用VUE组件的方法。这是一个简短的说法。MD中有两个组件。
上面，我们完成了MD介绍VUE组件的操作。接下来，我们将开发代码显示组件。总共三个区域。
每个展览区域都对应于VUE文件，因此粒径更加细。
让我们看一下如何实现代码显示功能。Vite可以将文件标记为此表格中的资源文件，以获取文件的内容。我们可以通过此表单获得显示区域的代码。但是，只能在开发环境中支持此方法，因此需要用网络请求代替生产环境。特定代码如下：
确定它是开发环境，选择静态资源加载还是网络请求。在这里也可以看到，在开发环境中，我们需要在包装后将文档文件夹复制到根路径。，使手动简历太烦人了。这是一个脚本。包装后，您自己复制它。您需要下载复印件包。您需要自己下载它。
使用方法只需要在原始包装命令之后添加，并且包装后将自动执行此代码。节点是背后代码的相对路径。
一个单击复制函数相对简单，即，将代码的内容复制到输入，然后键盘在输入选择状态后执行复制指令
当我们注册Show Code组件全局时，我们可以在MD文件中使用它
ShowPath是显示组件在显示代码时获得相应数据的路径。请请检查文档以获取特定详细信息
写组件包装配置：
配置软件包
这里最重要的是这三个字段，文件，主，模块
包装生成biluoui：
上传NPM：
这可能是开发开源组件网站的计划和基本过程。我希望对这个想法为朋友提供一些帮助。该文章没有太多描述UI组件的开发。我相信这对每个人来说都不是问题。如果您有其他需求，您可以自己查看此项目仓库。
原始：https：//juejin.cn/post/7101567321717604360