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

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.rhkb.cn/news/334785.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HCIP-Datacom-ARST自选题库__BGP多选【22道题】

1.BGP认证可以防止非法路由器与BGP路由器建立邻居,BGP认证可以分为MD5认证和Keychain认证,请问以下哪些BGP报文会携带BCGP Keychain认证信息?(报头携带) open Update Notication Keepalive 2.传统的BGP-4只能管理IPv4单播路由信息,MP-B…

JVM学习-彻底搞懂Java自增++

从字节码角度分析i和i的区别 public void method6() {int i 10;i; //在局部变量表上直接加1}public void method7() {int i 10;i; //字节码同i}public void method8() {int i 10;int a i; //通过下图可以看出先将局部变量表中的值push到操作数栈,然…

基于 RNNs 对 IMDB 电影评论进行情感分类

前言 系列专栏:【深度学习:算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域,讨论了各种复杂的深度神经网络思想,如卷积神经网络、循环神经网络、生成对…

kafka-消费者组-点对点测试

文章目录 1、点对点测试1.1、获取 kafka-consumer-groups.sh 的帮助信息1.2、列出所有的消费者组1.3、创建消费者1并指定组 my_group11.4、创建消费者2并指定组 my_group11.5、创建消费者3并指定组 my_group11.6、创建生产者发送消息到 my_topic1 主题1.6.1、发送第一条消息rom…

基于Pytorch框架的深度学习RegNet神经网络二十五种宝石识别分类系统源码

第一步:准备数据 25种宝石数据,总共800张: { "0": "Alexandrite","1": "Almandine","2": "Benitoite","3": "Beryl Golden","4": "Carne…

打造爆款活动:确定目标受众与吸引策略的实战指南

身为一名文案策划经理,我深知在活动策划的海洋中,确定目标受众并设计出能触动他们心弦的策略是何等重要。 通过以下步骤,你可以更准确地确定目标受众,并制定出有效的吸引策略,确保活动的成功: 明确活动目…

提示优化 | PhaseEvo:面向大型语言模型的统一上下文提示优化

【摘要】为大型语言模型 (LLM) 制作理想的提示是一项具有挑战性的任务,需要大量资源和专家的人力投入。现有的工作将提示教学和情境学习示例的优化视为不同的问题,导致提示性能不佳。本研究通过建立统一的上下文提示优化框架来解决这一限制,旨…

【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样?以LeNet-5为例说明。

一个简单的经典CNN网络结构由:输入层、卷积层、池化层、全连接层和输出层,这五种神经网络层结构组成。它最最经典的实例是LeNet-5,它最早被设计用于手写数字识别任务,包含两个卷积层、两个池化层、几个全连接层,以及最…

【数据结构】AVL树——平衡二叉搜索树

个人主页:东洛的克莱斯韦克-CSDN博客 祝福语:愿你拥抱自由的风 目录 二叉搜索树 AVL树概述 平衡因子 旋转情况分类 左单旋 右单旋 左右双旋 右左双旋 AVL树节点设计 AVL树设计 详解单旋 左单旋 右单旋 详解双旋 左右双旋 平衡因子情况如…

宿舍管理系统代码详解(操作界面)

目录 一、前端代码 1.样式展示 2.代码详解 <1>主页面列表部分 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <2>新增页面 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <3>修改页面…

【头歌】计算机网络DHCP服务器配置第四关配置路由器子接口答案

头歌计算机网络DHCP服务器配置第四关配置路由器子接口操作步骤 任务描述 本关任务&#xff1a;配置路由器的子接口。 操作要求 在第一关的拓扑图的基础上&#xff0c;配置路由器及 PC 机&#xff0c;具体要求如下&#xff1a; 1、打开路由器物理接口 F0/0 &#xff1b; 2、配置…

设计模式——概述

1.设计模式定义 ​ 设计模式是软件设计中常见问题的典型解决方案,可用于解决代码中反复出现的设计问题。设计模式的出现可以让我们站在前人的肩膀上&#xff0c;通过一些成熟的设计方案来指导新项目的开发和设计&#xff0c;以便于我们开发出具有更好的灵活性和可扩展性&#…

港口与航运3D三维虚拟仿真展区让更多人了解到海洋知识

在短短20天内&#xff0c;搭建起200多家线上3D展厅&#xff0c;听起来似乎是一项艰巨的任务。然而&#xff0c;对于我们的3d云展平台而言&#xff0c;这早已成为常态。连续三年&#xff0c;我们已成功为众多会展公司在短时间内构建出几百家甚至上千家的线上3D展会&#xff0c;见…

通过date命令给日志文件添加日期

一、背景 服务的日志没有使用日志工具&#xff0c;每次重启后生成新日志文件名称相同&#xff0c;新日志将会把旧日志文件冲掉&#xff0c;旧日志无法保留。 为避免因旧日志丢失导致无法定位问题&#xff0c;所以需要保证每次生成的日志文件名称不同。 二、解决 在启动时&am…

使用uniapp编写的微信小程序进行分包

简介&#xff1a; 由于小程序发布的时候每个包最多只能放置2MB的东西&#xff0c;所以把所有的代码资源都放置在一个主包当中不显示&#xff0c;所以就需要进行合理分包&#xff0c;&#xff0c;但是分包后整个小程序最终不能超过20MB。 一般情况下&#xff0c;我习惯将tabba…

牛客NC362 字典序排列【中等 DFS Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/de49cf70277048518314fbdcaba9b42c 解题方法 DFS&#xff0c;剪枝Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回…

Go 错误日志处理

是不是所有的 if err ! nil 的地方都应该输出错误日志&#xff1f; 打印过多的错误日志会导致日志文件变得冗长和难以阅读。 其次&#xff0c;重复的错误信息会增加冗余。 此外&#xff0c;每一层都打印错误日志&#xff0c;一旦错误信息设计不当&#xff0c;可能会导致上下…

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…

Java | Leetcode Java题解之第118题杨辉三角

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> generate(int numRows) {List<List<Integer>> ret new ArrayList<List<Integer>>();for (int i 0; i < numRows; i) {List<Integer> row new…

windows ollama 指定模型下载路径

为Ollama指定模型的下载路径 在Windows系统中&#xff0c;如果想为Ollama指定模型的下载路径&#xff0c;可以通过设置环境变量来实现。以下是详细的步骤&#xff1a; 确定默认下载路径&#xff1a; 默认情况下&#xff0c;Ollama的模型可能会下载到C:\Users\<用户名>…