vue3项目--让我们更快地开发vue(一)
前言写这篇文章的时候其实很迷茫，因为其实这篇文章的主要目的是开源自己的项目，希望自己的想法能够得到大家的意见给了我前进的目标。本文为连续篇，分为以下几个阶段，每个阶段都会有一篇文章（本文为第一节）：整个项目的介绍和使用过程，以及使用的目标和未实现目标的整体分析前端Vue3.0以及后面使用会有哪些坑？如何做一个类似javaspringMVC强类型限制的nodejs后端？如何在小型服务器上实现整个项目的自动化集群部署？我为什么要这样做？要么是样式差点不符合要求，要么是触发事件时你想要的参数，要么是新的组件，去网上找类似的代码模板。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写的。整体配置使用javasrpingMVC方式（写过java的同学好像很友好）整体部署使用Docker安装，集群使用的swarm（为什么不用k8s？服务器用不起，而且小服务器用不起），图片存放在阿里私有镜像库中。用于构建镜像的Jenkins触发器实际上是由前端、后端或服务端触发的。部署中确实遇到了很多问题，用了很多花哨的操作，后面慢慢一一讲解。具体代码的地址也会在后面写完文章后一一展开（把乱写的地方整理一下）。网站使用方法熟悉iconfont的童鞋可以直接操作。基本流程是一样的，只是代码编辑部分会有些不同（如果找不到地址，直接翻到页尾）。接下来是每个页面的说明：HomepageGan，我找不到解释截图的方法。一眼就能看出来的就不说了。下面下标中间的搜索框对应的是同一个功能。可以直接按名称搜索组件，回车或者点击按钮（会出现输入）1.新建一个组件（打开编辑页面）2.打开购物车管理3.筛选组件类型1、展开显示组件2、将组件添加到购物车3、点击rest进入组件编辑页面组件库组件库整体是一个简单的列表搜索功能，每个小方框也可以点击。请在单击时尝试一下。1.按名称搜索组件2.选择组件类别npm库。npm库的左侧是npm库包。名称在列表顶部有版本信息和安装语句1.搜索组件（回车打开新窗口）2.新建一个npm包3.发布npm包。编辑页最重要的是编辑页，它有很多功能。整体页面展示就是展示index.vue文件，我们需要新增一个vue文件新建一个组件然后写入index.vue中（注：不用引入注册，已经自动注册了）需要选择要使用入口文件的组件，生成npmEntry时使用1.添加代码模板，可以可视化编辑2.打开下层功能模块3.编辑器附加功能（切换主题，更改字体大小，是否自动更新编译）4.关闭代码块点击左侧重新进入（也可以手动拖动代码块显示区域）5.打开文件管理，请仔细阅读以上提示汇总和预览完成的功能：在线编辑、保存、生成、管理npm包发布组件的整体展示页面和操作流程代码添加模板，支持引入第三方库发布到自己自带npm库（暂未开放，因为用户还没有开放）未完成功能：发布npm包历史记录组件历史记录用户和权限管理下载工程进行汉化管理包含element、vant等常用ui组件库、代码模板和第三方库，完善上传文件，添加组件，添加图片服务，npm和组件使用说明，逻辑。用了再评论，或者给我信息反馈。联系方式在文末。这是我个人的心血来潮，我希望尽我的一份力量来简化我们的开发。希望大家轻喷下一章：Vue3.0不是一个小项目实践（二）（文章完成后标题会换成链接）主要内容：如何使用vue3搭建我们的项目以及对其进行管理，实现自己的组件库功能，无需任何ui库依赖可以（内部设置高度的验证方法）导出默认类ValidaDue{值：任何ValidaObject：BindingObj@ValidateDec.validationFn私有静态验证：函数@ValidateDec.resetStatus私有静态resetStatus：函数@ValidateDec.registerTrigger私有静态registerTrigger/：乐趣***Constructor*@param{ValidaPorops}propspassobject*@param{Function}emit回调函数*@param{Element}dompasslistendom*/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(()=>{如果(this.ValidaObject.validation)ValidaDue.registerTrigger(dom.value,this.ValidaObject);});constobj: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/End这是文章的全部内容。如果大家有什么问题或者想让我帮忙开发，欢迎私聊我评论，在下方贴上我的微信二维码。
