vue3+Ts可视化开发的研究,实战拖拽基础,组件动态生成,远程加载组件

10,316 阅读6分钟

废话

声明:本项目非常基础,大神请勿喷。大家觉得有用就看看。没用就看过就行了。

项目本身我是遇到一些问题的会进行分享提供,也会问一些问题,希望有大神能解答。

本身项目的设想初衷是为了研究可视化编辑器,

推荐开源项目:

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…

额,总体来说,代码没什么技术含量。更多的是一个技术思路和思考。