共计 3217 个字符，预计需要花费 9 分钟才能阅读完成。
前言
其实写这篇文章时我是很迷茫的，因为其实文章的次要目标是为了想开源一下本人的我的项目心愿本人的想法可能取得大家的意见，让我有继续前进上来的指标。
本文为一个间断的文章，分为以下几个阶段，每个阶段都会出一篇文章 (本篇为第一节)：
- 整个我的项目的介绍和应用流程以及实现目标和未实现目标
- 整体剖析前端应用的 vue3.0 以及咱们前面应用会有哪些坑
- nodejs 后端怎么去做相似 java springMVC 的强类型限定
- 小服务器上怎么实现整个我的项目自动化集群部署
我为什么要做
大家在开发 vue 的时候应用 ui 框架是否遇到过要不款式差一点点不符合要求、要不事件触发的时候差一点本人想要的参数，再或者对于一个新的组件去网上找相似的代码模板总是 js、jq 的代码，就是不能拿过去间接用。
要是咱们可能像应用 iconfont 一样去网上简略的找到须要的图标下载整体就能够用了该多好。
是的下面所说的就是我这个我的项目想要实现的指标，我须要的不是简简单单一个 ui 组件库，我想要的是一个 ui 组件自定义拼装平台。
其实现有的平台曾经有剖析代码模块并能够实现在线引入和单个的 npm 装置，然而咱们也不心愿咱们我的项目外面能有几十个不同 ui 组件的 npm 吧，所以我的最次要目标就是将多个组件主动组装成 npm 包让咱们造成我的项目专用的组件库。
而后就是咱们在引入相似 elemntui 组件库的时候咱们应用的其实只有那么几个组件全副引入会扩充 main.js，单个引入又太麻烦了怎么办？这个时候咱们可能间接在网页上抉择本人须要的组件生成独有的 elementui 包不是很好吗。
我做了什么
现阶段我的项目实现的指标能够用上面的流程图来展现
整体实现还比较简单，临时还没有做用户隔离和权限管制等性能
能够由下面的图看进去，其实只有咱们的组件可能有肯定的量级那么咱们的 ui 组件库实践上能够无限大，能够实现无数个咱们独特的 npm 组件包，分分钟写残缺个我的项目不是问题。
介绍了这么多了，我置信看到这里的大佬都会点进去试试这个不起眼的小网站: 自定义 ui 组件库 (关上后 5 秒钟过后会主动跳转至首页哦，网站有任何问题都能够分割自己，联系方式在文章最初)</div>
我搭建了怎么的我的项目
首先整体介绍下整个我的项目的状况：
- 前端框架选型用的 vue3.0，整体配置和重要性能实现应用的 ts 书写，vue 文件应用的 js 并且应用了 composition-api 书写形式
- 后端方面应用了 express 框架，全我的项目应用 ts 书写，整体配置应用的 java srpingMVC 模式（写过 java 的同学看起来很亲切）
- 整体部署方面应用了 docker，集群化应用的 swarm（为什么不必 k8s？服务器带不起，小服务器伤不起），镜像保留在阿里公有镜像库中，构建镜像应用的 jenkins 触发
其实不论在前端还是后端，还是服务器的部署真的问题超多，用了很多的骚操作这些前面都会缓缓一一的解说。
具体代码的地址也会在前面写完文章后进行一一开发（整顿一下乱写的中央）。
网站是怎么应用的
相熟 iconfont 的童鞋能够间接去操作，根本流程一样只有代码编辑那块会有点不一样（找不到地址就翻网页最初哦）
接下来就是每个页面的应用阐明了：
首页
- 淦，截图讲解我也莫得方法啊
- 一眼可能看出的货色我就不说了，上面下标对应雷同的性能
- 两头的搜寻框能够间接通过名称搜寻组件，按回车或点击按钮（输出就会呈现）
1、创立一个新的组件（关上编辑页）
2、关上购物车治理
3、筛选组件类型
1、开展展现组件
2、将组件增加至购物车
3、点击其余中央进入组件编辑页
组件库
- 组件库整体就是简略的列表搜寻性能，每个小框也是能够点击的哦，具体点击时什么样的快去试试吧
1、按名称搜寻组件
2、抉择组件类别
npm 库
- 左侧的就是 npm 库包的名称
- 在列表上方有版本信息和装置语句
1、搜寻组件（回车新开窗口）
2、新建 npm 包
3、公布 npm 包
编辑页
最重要的就是编辑页了，有很多的性能
- 整体页面展现是展现 index.vue 文件，咱们创立新的组件须要新增 vue 文件而后将其写入 index.vue 中（注：不须要引入注册，曾经主动注册了）
- 须要抉择组件应用入口文件，用作生成 npm 时候的入口
1、增加代码模板，并且能够可视化编辑
2、关上上层功能模块
3、编辑器额定性能（切换主题、扭转字体大小、是否主动热更新编译）
4、敞开代码块，可通过点击左侧从新进去（也能够手动拖动代码块显示区域）
5、关上文件治理，请仔细阅读下面的提醒
总结以及预报
已实现性能:
- npm 包的公布
- 组件在线编辑、保留、生成、治理
- 整体展现页面和操作流程
- 代码模板的增加以及反对引入第三方库
- 公布至本人的 npm 库中（因为用户未作所以暂未凋谢）
未实现性能：
- 公布 npm 包历史记录
- 组件历史记录
- 用户以及权限治理
- 下载我的项目进行本地化治理
- 收录 element、vant 等罕用 ui 组件库
- 代码模板和第三方库欠缺
- 上传文件增加组件
- 增加图片服务
- 对于 npm 和组件的应用阐明文档逻辑
- 网站外部的组件实现相互注册调用
整体我的项目到这就介绍完了，心愿大家可能去进行应用下而后评论，或者给我进行信息反馈，联系方式在最初，这就是我集体灵机一动心愿为咱们开发进行简化尽一份力，望各位大佬轻喷
下一章：Vue3.0 一个不算小的我的项目实际（二）（文章实现后会将该题目换为链接）
次要内容：如何应用 vue3 搭建咱们的我的项目并进行治理以及在没有任何 ui 库依赖的时候实现本人的组件库性能（内带高度汇合的校验形式）
export default class ValidaDue {
value: any
ValidaObject: BindingObj
@ValidateDec.validationFn
private static validation: Function
@ValidateDec.resetStatus
private static resetStatus: Function
@ValidateDec.registerTrigger
private static registerTrigger: Function
/**
* 构造函数
* @param {ValidaPorops} props 传入传递对象
* @param {Function} emit 回调函数
* @param {Element} dom 传入监听 dom
*/
constructor(props: ValidaPorops, emit: Function, dom: RefDom) {this.value = ref(props.modelValue);
emit('update:modelValue', this.value);
this.ValidaObject = reactive({
value: this.value,
rules: props.rules,
check: true,
errorMsg: ''
});
this.ValidaObject.validation = ValidaDue.validation(this.ValidaObject);
this.ValidaObject.resetStatus = ValidaDue.resetStatus(this.ValidaObject);
onMounted(() => {if (this.ValidaObject.validation) ValidaDue.registerTrigger(dom.value, this.ValidaObject);
});
const obj: any = inject('form', null);
obj?.push(this.ValidaObject);
}
}我的项目地址
集群拜访入口：http://36.111.183.168:9527/
5m 高网速服务拜访入口：http://36.111.183.168:9988/
1m 低速域名拜访入口：http://vue.tanyh.cn/
结尾
这就是本文全部内容了，如果有任何问题或者想让我帮忙进行开发欢送进行评论的私聊我，上面贴上自己微信二维码。