一个Vue3搭建的低代码数据可视化开发平台

一、vue

Vue.js是一款基于MVVM模式的JavaScript框架，通过其简洁、高效的语法和强大的功能，帮助开发者构建出更加灵活、快速和可维护的Web应用。与其他框架相比，Vue区别于市场上的繁杂，它注重易用性和迅速上手的优势，给开发者提供了更大的自由度。无论是用于构建简单的个人项目，还是复杂的企业级应用，Vue都能胜任。

Vue3 的诞生源于对用户反馈和技术挑战的综合考量。作为一项重大的升级，Vue3 在性能、开发体验和协作能力等方面迈进了重要一步。JNPF快速开发平台目前更新至最新的Vue3版本。

二、使用Vue

JNPF是一款优秀的国产开发平台，采用Java+.net双技术引擎，近年在市场表现和产品竞争力方面表现较为突出，前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue3）。代码生成器依赖性低，灵活的扩展能力，可灵活实现二次开发。

平台将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求。满足系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力；

为了支撑更高技术要求的应用开发，从数据库建模、Web API构建到页面设计，与传统软件开发几乎没有差异，平台将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求。

值得一提的是，JNPF快速开发平台的Vue3版本是基于Vue3.x、vue-router4.x、Vite4.x、Ant-Design-Vue3.x、TypeScript、pinia、less的后台解决方案，采用pnpm包管理工具，无论是在小型项目还是庞大的企业级应用中，我们都可以依靠这个强大的技术栈来迅速构建出高质量的应用。

特点：

JNPF是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。

相关链接：www.jnpfsoft.com/?csdn

技术点：

• 框架：基于 Vue3 框架，轻量级、易上手、可以有简洁的API提供高效的数据绑定和灵活的组件系统。
• 类型：使用 TypeScript 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容；这一特性让团队协作更加高效，同时也降低了维护代码的成本。
• 性能：多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度；

最新技术：

基于 Vue3 & TypeScript框架编写，代码结构更加清晰，使用pnpm包管理工具

完备的功能：

提供项目控制、全局控制、组件基础配置、动画配置、请求配置、事件配置等。

丰富的组件：

拥有丰富的内容组件，内置 60+ 个组件内容，并且在不断更新升级中。

核心功能：

表单引擎、可视化引擎、BI引擎、流程引擎、权限引擎、门户引擎、大屏引擎、接口中心、物联平台

最大的优势：

提供100%源码，支持私有化部署（本地部署）

三、低代码的前端框架采用Vue3的优势介绍

• 轻量级、易上手、可以有简洁的API提供高效的数据绑定和灵活的组件系统
• 组件（component）是Vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码
• 双向数据绑定的实现更容易操作DOM（vue.js)则使用object.defineProperty方法，监控对方数据的操作，从而可以自动触发数据同步，可以精准的将变更发给绑定的视图，而不是对所有数据都执行一次检测（不同于angular.js）。
• Vue是单页应用；使页面局部刷新，不要求每次跳转页面都要请求所有数据和DOM。
• Vue采用虚拟DOM，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式。

优势扩展：（具体优势）

1、响应式性能提升

性能比Vue2快1.2-2倍。性能的提升主要是通过响应式系统的提升（vue3使用proxy对象重写响应式）以及编译优化（优化编译和重写虚拟dom、优化diff算法）来完成。

2、代码体积更小

Vue3按需编译，整体体积变小了。除了移出一些不常用的API，值得一提的是Tree shanking任何一个函数，如ref、reactive、computed等，仅仅在用到的时候才打包，没用到的模块都被去掉，打包的整体体积变小。

3、支持组合API（Composition Api）；

Vue2使用Options Api（选项api），而Vue3使用Composition Api （组合api）。

①Options Api：

条例清晰，相同的放在相同的地方；但随着组件功能的增大，关联性会大大降低，组件的阅读和理解难度会增加；

②Composition Api：

组件根据逻辑功能来组织的，一个功能所定义的所有API会放在一起（更加的高内聚，低耦合），即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API。

4、更好的 ts 支持

Vue 新增了 DefineComponent 函数，使组件在 ts 下，更好的利用参数类型推断。如：reactive 和 ref 很具有代表性。

5、更先进的组件

①vue 中可以不需要根节点，多个元素或标签可并列存在。

②可以把 teleport 中的内容添加到任意的节点内，对于嵌套较深的组件来说绝对是一个福音。

③允许程序在等待异步组件渲染一些后备的内容，可以让我们创建一个平滑的用户体验。