vue3项目--让咱们更快开发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秒钟事后会自动跳转至首页哦，网站有任何问题均可以联系本人，联系方式在文章最后)</div>

我搭建了怎样的项目

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

• 前端框架选型用的vue3.0，总体配置和重要功能实现使用的ts书写，vue文件使用的js而且使用了composition-api书写方式
• 后端方面使用了express框架，全项目使用ts书写，总体配置使用的java srpingMVC模式（写过java的同窗看起来很亲切）
• 总体部署方面使用了docker，集群化使用的swarm（为何不用k8s？服务器带不起，小服务器伤不起），镜像保存在阿里私有镜像库中，构建镜像使用的jenkins触发

其实无论在前端仍是后端，仍是服务器的部署真的问题超多，用了不少的骚操做这些后面都会慢慢一一的讲解。

具体代码的地址也会在后面写完文章后进行一一开发（整理一下乱写的地方）。

网站是怎么使用的

熟悉iconfont的童鞋能够直接去操做，基本流程同样只有代码编辑那块会有点不同（找不到地址就翻网页最后哦）

接下来就是每一个页面的使用说明了：

首页

• 淦，截图解说我也莫得办法啊
• 一眼可以看出的东西我就不说了，下面下标对应相同的功能
• 中间的搜索框能够直接经过名称搜索组件，按回车或点击按钮（输入就会出现）

一、 建立一个新的组件（打开编辑页）

二、 打开购物车管理

三、 筛选组件类型

一、展开展现组件

二、将组件添加至购物车

三、点击其他地方进入组件编辑页

组件库

• 组件库总体就是简单的列表搜索功能，每一个小框也是能够点击的哦，具体点击时什么样的快去试试吧

一、按名称搜索组件

二、选择组件类别

npm库

• 左侧的就是npm库包的名称
• 在列表上方有版本信息和安装语句

一、搜索组件（回车新开窗口）

二、新建npm包

三、发布npm包

编辑页

最重要的就是编辑页了，有不少的功能

• 总体页面展现是展现index.vue文件，咱们建立新的组件须要新增vue文件而后将其写入index.vue中（注：不须要引入注册，已经自动注册了）
• 须要选择组件使用入口文件，用做生成npm时候的入口

一、添加代码模板，而且能够可视化编辑

二、打开下层功能模块

三、编辑器额外功能（切换主题、改变字体大小、是否自动热更新编译）

四、关闭代码块，可经过点击左侧从新出来（也能够手动拖动代码块显示区域）

五、打开文件管理，请仔细阅读上面的提示

总结以及预告

已完成功能:

• 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/

结尾

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