vue3项目--让我们更快开发vue（一）__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

前言

其实写这篇文章时我是很迷茫的，因为其实文章的主要目的是为了想开源一下自己的项目希望自己的想法能够获得大家的意见，让我有继续前进下去的目标。

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

整个项目的介绍和使用流程以及实现目标和未实现目标

整体分析前端使用的vue3.0以及我们后面使用会有哪些坑

nodejs后端怎么去做类似java springMVC的强类型限定
小服务器上怎么实现整个项目自动化集群部署

我为什么要做

大家在开发vue的时候使用ui框架是否遇到过要不样式差一点点不符合要求、要不事件触发的时候差一点自己想要的参数，再或者对于一个新的组件去网上找类似的代码模板总是js、jq的代码，就是不能拿过来直接用。

要是我们能够像使用iconfont一样去网上简单的找到需要的图标下载整体就可以用了该多好。

是的上面所说的就是我这个项目想要实现的目标，我需要的不是简简单单一个ui组件库，我想要的是一个ui组件自定义拼装平台。

其实现有的平台已经有分析代码模块并可以实现在线引入和单个的npm安装，但是我们也不希望我们项目里面能有几十个不同ui组件的npm吧，所以我的最主要目的就是将多个组件自动组装成npm包让我们形成项目专用的组件库。

然后就是我们在引入类似elemntui组件库的时候我们使用的其实只有那么几个组件全部引入会扩大main.js，单个引入又太麻烦了怎么办？这个时候我们能够直接在网页上选择自己需要的组件生成独有的elementui包不是很好吗。

我做了什么

现阶段项目实现的目标可以用下面的流程图来展示

整体实现还比较简单，暂时还没有做用户隔离和权限控制等功能

可以由上面的图看出来，其实只要我们的组件能够有一定的量级那么我们的ui组件库理论上可以无限大，可以实现无数个我们独特的npm组件包，分分钟写完整个项目不是问题。

介绍了这么多了，我相信看到这里的大佬都会点进去试试这个不起眼的小网站: 自定义ui组件库 (打开后5秒钟过后会自动跳转至首页哦，网站有任何问题都可以联系本人，联系方式在文章最后)

我搭建了怎样的项目

首先整体介绍下整个项目的情况：

前端框架选型用的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/

结尾

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