前言

其实写这篇文章时我是很迷茫的，因为其实文章的次要目标是为了想开源一下本人的我的项目心愿本人的想法可能取得大家的意见，让我有继续前进上来的指标。

本文为一个间断的文章，分为以下几个阶段，每个阶段都会出一篇文章(本篇为第一节)：

  • 整个我的项目的介绍和应用流程以及实现目标和未实现目标
  • 整体剖析前端应用的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/

结尾

这就是本文全部内容了，如果有任何问题或者想让我帮忙进行开发欢送进行评论的私聊我，上面贴上自己微信二维码。