11天打造基于vue3的可视化布局器

为什么要用vue3

我有很多朋友已经在企业级项目中使用vue3,有时我会问他们写vue3与vue2的体验有什么不同?我以为他们会说出无数类似于更快,更方便之类的赞美之词。可是,大部分回答都是“没什么区别,就是写法变了而已”。但是今天我们要告诉你尽早拥抱vue3,绝对是一个无比正确的选择,不是单纯的‘写法变了’,而是实实在在的生产力提升!

有些人可能会说“vue3的生态不完善,用起来很多坑。”但是我要告诉你,除了一些基于vue2开发的库还没支持vue3之外,对于工程化的支持已经很完善了。我建议你基于vite2去搭建工程,如果你嫌麻烦vitesse是一个基于vite,整合了很多能提升效率的插件的基础工程模版,你可以直接使用它。列举一些它的特性:

  • vite-plugin-pages,支持类似nuxt的自动生成路由
  • vite-plugin-vue-layouts,页面可以自由组合layout
  • vite-plugin-components 自动导入公共组件(自动生成import然后插入到componets中)
  • vite-plugin-icons 支持很多图标库

如果你觉得vue3跟vue2只是写法变了,让你感受不到生产力的提升,那很可能是你的业务太简单了。

在vue2中我们修改数组中的对象时需要用$set

// vue2
data(){
    return {
        test: [{ a: 1 }]
    }
}

this.test[0] = { a:2 }  // a的值不会刷新
this.$set(this.test,0,{ a:2 }) // a的值会刷新
 
// vue3
let test = reactive([{ a: 1 }])
test[0] = { a:2 }  // a的值会刷新
 

在更深嵌套的场景下,会带来极大的效率提升。例如在可视化布局器中,生成代码时需要修改嵌套节点的信息,在vue3中写起来完全没有负担和额外的理解成本。

第二个对我影响比较大的则是组合式api,让我的每个业务相关的data和methods可以放到一起了,维护起来方便了许多。

可视化布局器

可视化布局的新思路,这篇文章中我阐述了现存的可视化布局器的一些问题以及改进思路。顺着这个思路,我用11天做了一个完成度还算不错的产品雏形(不是标题党,身体力行)。我叫他grid2flex,由grid布局生成flex布局的意思。这里我想着重介绍一下如何使用grid2flex,请你先耐心看完这一部分的内容,后面有在线体验的地址。

从快速生成布局开始

在一般的可视化布局器中,如果你想完成下面的布局,需要两步:

WechatIMG1.png

  1. 拖出一个包含两个col的row
  2. 往col中放入控件

而在grid2flex中你只需要生成两个单元格,将他们并排放置即可:

2021-03-26 18.28.33.gif

点击生成代码,可以得到如下代码,它是基于vue和elment的:

<template>
    <el-row type="flex" justify="start">
        <el-col :span="12">
            <div></div>
        </el-col>
        <el-col :span="12">
            <div></div>
        </el-col>
    </el-row>
</template>
<script >
export default {
    data() {
        return {}
    }
}
</script>
<style scoped>

</style>
 

我们来看看更复杂的情况,例如这种布局:

WechatIMG3.png

在常规的可视化布局中,你需要拖出这样一个布局(步骤太多我就不描述了):

WechatIMG4.png

在grid2flex中,则是这样的:

2021-03-26 18.46.30.gif

生成的代码是这样的:

WechatIMG10.png

好吧,不去跟陈旧的布局器比了,我们尝试一下更高难度的布局:

WechatIMG8.png

生成的代码是你所希望的吗?

WechatIMG9.png

生成控件

你不需要通过拖拽的方式,点击的效率会更高。通过点击左侧的面板中的控件,就能生成有默认宽高的单元格。随后,你可以随意调整他的宽高来告诉grid2flex,你所希望的布局。

2021-03-26 18.53.52.gif

其它的功能我就不一一列举了,有兴趣的话,你可以自己来试试grid2flex

技术点实现

如何实现grid布局

grid的布局是通过vue-grid-layout来实现的,基于它可以做单元格的锁定,复制,删除等操作,方便布局。需要注意的是目前它还不支持vue3,引入时会报错。

如何生成控件

四个步骤:

  1. 点击控件会生成类似ast语法树的结构,来记录控件的位置,宽高以及控件类型
  2. 遍历这个树,根据合并算法增删节点,用于生成row和col
  3. 根据新的树生成html字符串
  4. 通过creatApp动态渲染,mount到对应的gridItem中

需要注意的是,第四步需要使用vue的runtime,否则会报错。

代码如何生成

在生成控件中的第三步会生成控件的html标签字符串,然用将获取的字符串用js-beautify格式化一下。把生成后的代码放入markdown中,用highlight.js高亮一下就能得到最后的效果了。

如果你对一些细节有兴趣,可以找我聊聊,这里我就不贴代码了。

未来展望

我其实不确定gird2flex是否有价值,希望通过这个产品雏形来让市场验证,如果它对你有帮助请务必给我反馈。在我的todoList中还有一些将来会支持的功能:

  • 支持vant
  • 支持小程序
  • 支持模版,物料库
  • 支持根据不同的项目配置来生成代码,例如sass,less,pug,typescript,preitter,eslint等等

我是火叶,一个独立开发者,希望能通过自己微薄的能力给社区带来点光和热。

(0)
上一篇 2021年3月27日 下午1:08
下一篇 2021年3月28日 上午10:16

相关推荐

发表评论

登录后才能评论