赞
踩
##前言
其实写这篇文章时我是很迷茫的,因为其实文章的主要目的是为了想开源一下自己的项目希望自己的想法能够获得大家的意见,让我有继续前进下去的目标。
本文为一个连续的文章,分为以下几个阶段,每个阶段都会出一篇文章(本篇为第一节):
大家在开发vue的时候使用ui框架是否遇到过要不样式差一点点不符合要求、要不事件触发的时候差一点自己想要的参数,再或者对于一个新的组件去网上找类似的代码模板总是js、jq的代码,就是不能拿过来直接用。
要是我们能够像使用iconfont一样去网上简单的找到需要的图标下载整体就可以用了该多好。
是的上面所说的就是我这个项目想要实现的目标,我需要的不是简简单单一个ui组件库,我想要的是一个ui组件自定义拼装平台。
其实现有的平台已经有分析代码模块并可以实现在线引入和单个的npm安装,但是我们也不希望我们项目里面能有几十个不同ui组件的npm吧,所以我的最主要目的就是将多个组件自动组装成npm包让我们形成项目专用的组件库。
然后就是我们在引入类似elemntui组件库的时候我们使用的其实只有那么几个组件全部引入会扩大main.js,单个引入又太麻烦了怎么办?这个时候我们能够直接在网页上选择自己需要的组件生成独有的elementui包不是很好吗。
现阶段项目实现的目标可以用下面的流程图来展示
整体实现还比较简单,暂时还没有做用户隔离和权限控制等功能
可以由上面的图看出来,其实只要我们的组件能够有一定的量级那么我们的ui组件库理论上可以无限大,可以实现无数个我们独特的npm组件包,分分钟写完整个项目不是问题。
介绍了这么多了,我相信看到这里的大佬都会点进去试试这个不起眼的小网站: 自定义ui组件库 (打开后5秒钟过后会自动跳转至首页哦,网站有任何问题都可以联系本人,联系方式在文章最后)
首先整体介绍下整个项目的情况:
其实不管在前端还是后端,还是服务器的部署真的问题超多,用了很多的骚操作这些后面都会慢慢一一的讲解。
具体代码的地址也会在后面写完文章后进行一一开发(整理一下乱写的地方)。
熟悉iconfont的童鞋可以直接去操作,基本流程一样只有代码编辑那块会有点不一样(找不到地址就翻网页最后哦)
接下来就是每个页面的使用说明了:
1、 创建一个新的组件(打开编辑页)
2、 打开购物车管理
3、 筛选组件类型
1、展开展示组件
2、将组件添加至购物车
3、点击其余地方进入组件编辑页
1、按名称搜索组件
2、选择组件类别
1、搜索组件(回车新开窗口)
2、新建npm包
3、发布npm包
###编辑页
最重要的就是编辑页了,有很多的功能
1、添加代码模板,并且可以可视化编辑
2、打开下层功能模块
3、编辑器额外功能(切换主题、改变字体大小、是否自动热更新编译)
4、关闭代码块,可通过点击左侧重新出来(也可以手动拖动代码块显示区域)
5、打开文件管理,请仔细阅读上面的提示
##总结以及预告
已完成功能:
未完成功能:
整体项目到这就介绍完了,希望大家能够去进行使用下然后评论,或者给我进行信息反馈,联系方式在最后,这就是我个人心血来潮希望为我们开发进行简化尽一份力,望各位大佬轻喷
下一章: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/
这就是本文全部内容了,如果有任何问题或者想让我帮忙进行开发欢迎进行评论的私聊我,下面贴上本人微信二维码。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。