nonsense

Disclaimer: this item is very basic, please do not spray. Look at it if you think it’s useful. Just read it if it doesn’t work.

When I meet some problems in the project, I will share and provide them, and ALSO ask some questions, hoping that some gods can answer them.

The project was conceived as a study of visual editors,

Recommended open source projects:

Form-generator:gitee.com/mrhj/form-g… Install. Otherwise, if yarn is used, someone else’s private NPM address will be used

Personal copy after the project address: github.com/ht-sauce/fo…

Vue3 is now in rc version. According to my current use, JSX is not recommended, at least in TS mode, because the official definition of TS is not perfect enough. And. Ts +vue3+ JSX Too many holes to fill.

Vue3 itself has a very similar development experience to VUE2 without using composition-API. But I personally don’t recommend upgrading VUe2 to 3 for enterprise projects, it’s a big change. Normally, you can use both 2 and 3. And 2 is followed by an upgrade to 2.7. For some older projects, going from CLI2 to 3 is a painful process in itself. If you need to change the core library, too much change. The future is definitely vuE3, but 2 definitely exists.

Topic: What problems should we solve with visual development?

I like the head of the political cloud more and more. Every time early chat hall Lord’s words are always so simple, profound, easy to understand.

And then the idea of why there is visual development is because I started as an employee in the space time medicine system. Under the space-time system, there is a visual binary system, which greatly reduces the development cost. And time and space medicine in Jiangsu, to achieve more than 90 percent of the market occupancy rate. It is used by all wholesale pharmaceutical companies.

Then I moved to the front end and saw the visual mall layout of Zhengcai Cloud in Nuggets. Recently saw the above project source code. Under repeated exposure, I have a certain judgment of the core of visualization.

Components can be dragged, whether html5 drag or custom position drag is the core.

2. How do you solve the problem of dynamic component rendering in today’s front-end framework

3, after the launch of the product, you can not get a basic library up. So how do you solve the problem of difficult page loading

1. Drag

It’s not that hard to drag and drop, but the point is to do it. Looks simple, but who knows how to do it?

There are really only two drag and drop solutions

1、html5拖拽draggable

2, custom element style top, left equivalent

I chose HTML5 drag here mainly because HTML drag solves several problems

1. Drag is better

2, can detect drag to which element below

The code here is very simple, and you actually need to practice it a little bit.

The core is three:

Draggable =”true”, locates the drag element

Ondrop to where

Ondragstart Starts dragging

HTML part

<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>
Copy the code

JS part

setup(props, ctx) { const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).value const setArr = (): Void => {list[0] = 1111} // start to move const dragStart = (ev: Event, index: number): Const drop = (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) // return {drop, dragstart, list, setArr, }Copy the code

The code is very simple and won’t be explained much. That actually solves the drag problem. Your elements are ready to swap positions

1.1. Ts beginners’ stepping pits in the process of dragging, thanks to wechat group: Mumu big guy for clarification

There is no problem with the basic variable declaration for TS, but if you have thought about how to declare a type for a js native event, you can’t define the next operation after you declare object. So here in fact, TS official pit, also did not say. In fact, TS has a built-in type, Event

However, event is not enough. When I use it, as in the following code, I get an error

ev.dataTransfer.setData('text', index)
Copy the code

So we actually need to define gobal.d.ts in the SRC directory

Redefine it as follows

declare interface Event { dataTransfer: { setData(... args): void getData(... args) } }Copy the code

1.2 vuE3 framework TS pits

We all know about vue2 and we all have this object pointing to an instance of vue3, so if we migrate to vue3. First use composition-API you can’t use this. Then you can only use provide inject. You are advised to look at this quickly.

So we really can’t use this?

No, the composition-API is just your choice of development mode. In fact, VUe3 retains the original lifecycle notation. You can still write it like old code. But vue3’s this is instantiated by Vue alone and placed globally. In order to be compatible with older code, we need to use

app.config.globalProperties
Copy the code

Instead of vue. Prototype

However, vue3 has some problems in TS mode and the definition is fine when I define it in the code above. But finally when I use this variable, ts will report error. The solution is

/ / solve the problem of ts global variable definition under declare the module '@ vue/runtime - core' {interface ComponentCustomProperties {HTTP: number}}Copy the code

You can find the issue under vuE-Next project by searching globalProperties

As you can see, VUE3 retains the original API development approach. So please stop talking about destructive upgrades for newbies. Composition-api is really just a development approach that has been incorporated into VUE3.

I’m just new to TS, don’t spray, thank you

2. Dynamic components

Vue has a solution to this problem for a long time, and the political Cloud team has a gold-digging blog. The solution is

<component :is="DynamicComponents"></component>
Copy the code

The format passed in by is needs to be the variable name of the component you are importing

Practical JS part

setup(props, ctx) { console.log({ ... // Dynamic component test 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, }Copy the code

Now that we’ve solved the big core problem, it’s just a matter of defining and developing.

3. About remotely loading components

Let’s talk about on-demand loading of VUE first.

First vue3 was loaded on demand using Webpack code-spliting, and then we actually performed a section every time we jumped to a new page

The script itself is loaded remotely from the server. Can our components do the same?

Is it similar to a webpack5 feature? Is it like a micro front end?

Here is a recommended tool, which has not yet been used. But there’s no problem in principle.

Vue-module-loader:github.com/mqhe2007/vu…

Load components remotely on demand. Take a look

4. Summary and code address

I may be too cynical and too sentimental. But I said it anyway.

Then about this project code: github.com/ht-sauce/vi…

Well, in general, the code isn’t very technical. It’s more of a technical thinking and thinking.