废话
声明:本项目非常基础,大神请勿喷。大家觉得有用就看看。没用就看过就行了。
项目本身我是遇到一些问题的会进行分享提供,也会问一些问题,希望有大神能解答。
本身项目的设想初衷是为了研究可视化编辑器,
推荐开源项目:
form-generator:gitee.com/mrhj/form-g… install,否则走yarn的话会走别人的私域npm地址
个人copy之后的项目地址:github.com/ht-sauce/fo…
vue3目前到了rc版本,依据我目前的使用是不推荐用jsx,至少ts模式下不推荐,因为官方对于ts的定义还不够完善。并且。ts+vue3+jsx要填的坑太多。
本身vue3其实大家不用composition-api的话和vue2的开发体验其实是非常相似的。但是我个人其实对于企业级项目, 我不推荐把vue2升级为3,变化太大。正常来说2和3其实都可以用。并且2后面还有2.7的一个升级。对于一些老项目,本身从cli2到3就是一个非常痛苦的过程。如果还需要更换核心库,变动太大。未来肯定是vue3的,但是2肯定也存在。
正题:关于可视化开发我们要解决什么问题?
先吹一波,我越来越喜欢政采云的堂主了。每次早早聊大会堂主的话语总是那么的简单,又深刻,容易理解。
然后关于为什么有可视化开发的设想,是因为我最早的时候是在时空医药体系下的员工。时空体系下有一套可视化的二开系统,极大的降低了开发成本。并且时空医药就江苏,做到了百分之90以上的市场占用率。所有批发药企都在使用。
之后我转战前端,在掘金看到了政采云的可视化商城布局。最近又看到了上面的项目源码。反复熏陶下,我对可视化的核心存在了一定的判断。
1、组件可拖拽,不论是html5的拖拽还是自定义的位置拖拽都是核心。
2、在如今的前端框架下,你该如何解决组件动态渲染的问题
3、上线之后的产品,你总不可能弄一个基础库上去吧。那么该如何解决页面加载困难的问题
1、关于拖拽
其实拖拽并不难,但是大家核心在于要去做。看着简单,谁知道做起来如何呢?
拖拽方案其实目前就两种
1、html5拖拽draggable
2、自定义元素的style的top,left等值
我这里选择html5的拖拽,主要是因为html的拖拽解决了几个问题
1、拖拽更好看
2、能检测拖拽到哪个元素下面
这里代码非常简单,其实大家稍微实战下就行了。
核心是三个:
draggable="true",定位拖拽元素
ondrop拖拽到哪里
ondragstart开始拖拽
HTML部分
<template v-for="(item, index) in list">
<div
:key="index"
@dragover.prevent
@drop.prevent="drop($event, index)"
draggable="true"
@dragstart="dragstart($event, index)"
class="ceshi"
>
{{ item }}
</div>
</template>
复制代码
JS部分
setup(props, ctx) {
const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).value
const setArr = (): void => {
list[0] = 1111
}
// 开始移动
const dragstart = (ev: Event, index: number): void => {
ev.dataTransfer.setData('text', index)
}
// 放到何处
const drop = (ev: Event, index: number): void => {
const startIndex: number = Number(ev.dataTransfer.getData('text'))
const startLi: number = list[startIndex]
const endLi: number = list[index]
list.splice(index, 1, startLi) // 放过去
list.splice(startIndex, 1, endLi) // 反过来
}
return {
drop,
dragstart,
list,
setArr,
}
复制代码
代码非常简单,不多解释了。这样实际上就解决了拖拽的问题。你元素已经可以初步交换位置了
1.1、拖拽过程中ts初学者的踩坑,感谢微信群:木木大佬解惑
关于ts的基本的变量声明没什么问题,但是大家想过如果是js的原生事件怎么声明类型,你声明了object之后是无法定义下一步操作的。那么这里其实ts官方比较坑,也没有明说。其实ts有一个内置类型,Event
但是event还不够,我在使用的时候,如下面这段代码会报错
ev.dataTransfer.setData('text', index)
复制代码
那么我们其实需要使用到在src目录下定义gobal.d.ts
如下进行重新定义
declare interface Event {
dataTransfer: {
setData(...args): void
getData(...args)
}
}
复制代码
1.2、vue3框架ts踩坑
我们都知道vue2我们都有this对象指向vue3实例,那么如果迁移到vue3。首先使用composition-api你没有办法使用this。那么你只能使用provide,inject,进行依赖注入。这块大家建议赶紧看起来。
那么我们就真的无法使用this了吗?
其实不是的,composition-api只是你的开发模式的选择。其实vue3保留了原来的生命周期写法。你依旧可以像老代码一样书写。但是vue3的this是vue单独实例化出来放在全局的。为了兼容老代码,我们要使用
app.config.globalProperties
复制代码
代替vue.prototype
但是,vue3在ts模式下有点问题,我在上面代码进行定义的时候,定义没有问题。但是最终我在使用的时候,this.变量是ts报error了。解决方式是
// 解决ts下全局变量定义问题
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
http: number
}
}
复制代码
具体大家可以在vue-next项目下issue,搜索globalProperties找到
说到这里,其实大家发现了,其实vue3保留了原有的api开发方式。所以请新手别再说破坏性升级了。composition-api实际上是被合并到vue3的一个开发方式而已。
关于ts我也只是新手,大神勿喷,谢谢
2、关于动态组件
这块其实很早的时候vue就有解决方式,并且政采云团队也发过掘金博客。解决方式就是
<component :is="DynamicComponents"></component>
复制代码
is传入的格式需要是你导入的组件的变量名称
实战js部分
setup(props, ctx) {
console.log({ ...ctx })
// 动态组件测试
const dom = ref(-1).value
console.log(dom)
const DynamicComponents = ref('DynamicComponents')
const setDynamicComponents = (): void => {
DynamicComponents.value = 'DhtTest'
console.log(DynamicComponents.value)
}
return {
setDynamicComponents,
DynamicComponents,
}
复制代码
这样我们就解决了核心的大问题,剩下就是具体定义和开发了。
3、关于远程加载组件
这个我们先讲讲vue的按需加载。
首先vue3的按需加载是利用了webpack的code-spliting,然后其实每次我们跳转一个新页面的时候是执行了一段
本身script就是远程从服务器拿到数据然后加载的。那么我们的组件是否也可以呢?
是不是和webpack5的某个功能很像呢?又像是微前端呢?
这里推荐一个工具,目前还未实战。但是从原理上完全没有问题。
vue-module-loader:github.com/mqhe2007/vu…
按需远程加载组件,大家看看吧
4、总结和代码地址
我可能太愤世嫉俗,又太感性。但是我还是说了。
然后关于本项目代码:github.com/ht-sauce/vi…
额,总体来说,代码没什么技术含量。更多的是一个技术思路和思考。