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

devtools/2024/10/18 22:27:48/

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.ppmy.cn/devtools/43686.html

相关文章

vue数字翻盘,翻转效果

数字翻转的效果 实现数字翻转的效果上面为出来的样子 下面为代码&#xff0c;使用的时候直接引入&#xff0c;还有就是把图片的路径自己换成自己或者先用颜色替代&#xff0c;传入num和numlength即可 <template><div v-for"(item, index) in processedNums&quo…

linux学习(六)

1.网络管理 (1)查看 ifconfig: root用户可以查看网卡状态, 普通用户: /sbin/ifconfig(需要加上命令的完整路径) (2)修改网络配置 通过命令修改网络配置 设置网卡的ip地址;禁用网卡和启用网卡了。 添加网关: (3)网络故障查询 ①ping 检测当前主机和目标主机是…

PHP:phpmyadmin 将查询数据导出csv

1、输入你的SQL查询出结果 2、查出数据以后拖到最下方【导出】 3、导出CSV

Python机器学习 Tensorflow + keras 实现CNN

一、实验目的 1. 了解SkLearn Tensorlow使用方法 2. 了解SkLearn keras使用方法 二、实验工具&#xff1a; 1. SkLearn 三、实验内容 &#xff08;贴上源码及结果&#xff09; 使用Tensorflow对半环形数据集分 #encoding:utf-8import numpy as npfrom sklearn.datasets i…

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…

全面剖析UNIX网络编程的五种I/O模式

在Linux系统中&#xff0c;内核将所有外部设备都视为文件来操作。对一个文件的读写操作会调用内核提供的系统命令&#xff0c;并返回一个文件描述符&#xff08;file descriptor&#xff0c;简称fd&#xff09;。同样地&#xff0c;对一个套接字的读写操作也有对应的描述符&…

pip安装软件包提示“没有那个文件或目录”问题的处理

文章目录 一、Python.h&#xff1a;没有那个文件或目录二、lber.h&#xff1a;没有那个文件或目录 一、Python.h&#xff1a;没有那个文件或目录 pip install -I python-ldap3.0.0b1 #异常提示In file included from Modules/LDAPObject.c:3:0:Modules/common.h:9:20: 致命错…

设计模式 22 访问者模式 Visitor Pattern

设计模式 22 访问者模式 Visitor Pattern 1.定义 访问者模式是一种行为型设计模式&#xff0c;它允许你在不改变已有类结构的情况下&#xff0c;为一组对象添加新的操作。它将算法与对象结构分离&#xff0c;使你能够在不修改现有类的情况下&#xff0c;为这些类添加新的操作。…