当前位置: 首页 > news >正文

项目优化后续 ,手撸一个精简版VUE项目框架!

之前说过项目之前用的vben框架,在优化完性能后打包效果由原来的纯代码96M变成了56M,后续来啦,通过更换框架,代码压缩到了36M撒花~
现在就来详细说说是怎么手撸一个框架的!
在这里插入图片描述

方案:

搭建一套 vite + vue3 + ant Design3 + ts 的框架,
做好规范定制、全局组件封装、公共配置等,
格式化代码配置、语法检测等功能植入,
并且将业务代码进行移植 + 优化

具体优化项目:

1、前端公共配置

● 把主题单独抽出,做成可配置文件
● 路由配置分类,方便路由管理
● 抽取全局公共变量配置枚举
● 抽取全局的公共方法做工具类函数(utils.js)
● 代码格式化配置(prettier.config),ts检测工具配置(tsconfig.json), eslint语法校验(.eslintrc)

2、全局UI规范

● 保持全局css样式风格统一(页面间距、字体大小、字体粗细、圆角角度…等)
● css代码的书写规范

3、全局组件封装

● 按照uI提供的规范样式,对 ant Design Vue 进行统一修改
● 封装提示框,操作反馈类的统一风格组件
● 对 modal 弹出框的常用方法抽取 封装hook
● 组件规范的的定制

4、接口API统一

● 接口请求封装(axios请求全局的拦截、拦截返回处理、方法封装)
● 接口请求代码格式规范

5、业务代码迁移

● 前端公共页面部分代码重构(header、Menu)
● 迁移业务代码 + 优化业务代码
● 业务代码迁移 + 优化 (预计7天)

相关文章:

项目优化后续 ,手撸一个精简版VUE项目框架!

之前说过项目之前用的vben框架,在优化完性能后打包效果由原来的纯代码96M变成了56M,后续来啦,通过更换框架,代码压缩到了36M撒花~ 现在就来详细说说是怎么手撸一个框架的! 方案: 搭建一套 vite vue3 a…...

【深度学习笔记】TensorFlow 基础

在 TensorFlow 2.0 及之后的版本中,默认采用 Eager Execution 的方式,不再使用 1.0 版本的 Session 创建会话。Eager Execution 使用更自然地方式组织代码,无需构建计算图,可以立即进行数学计算,简化了代码调试的过程。…...

面试题-springcloud中的负载均衡是如何实现的?

一句话导读 Springcloud中的负载均衡是通过Ribbon实现的,自带有很多负载均衡策略,如:包括轮询(Round Robin)、随机(Random)、加权轮询(Weighted Round Robin)、加权随机&…...

flink的ProcessWindowFunction函数的三种状态

背景 在处理窗口函数时,ProcessWindowFunction处理函数可以定义三个状态: 富函数getRuntimeContext.getState, 每个key每个窗口的状态context.windowState(),每个key的状态context.globalState,那么这几个状态之间有什么关系呢? …...

day50-springboot+ajax分页

分页依赖&#xff1a; <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.0.0</version> </dependency> 配置&#xff1a; …...

Win7 专业版Windows time w32time服务电脑重启后老是已停止

环境&#xff1a; Win7 专业版 问题描述&#xff1a; Win7 专业版Windows time w32time服务电脑重启后老是已停止 解决方案&#xff1a; 1.检查启动Remote Procedure Call (RPC)、Remote Procedure Call (RPC) Locator&#xff0c;DCOM Server Process Launcher这三个服务是…...

全网最强,接口自动化测试-token登录关联实战总结(超详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 在PC端登录公司的…...

OLAP ModelKit Crack,ADO.NET和IList

OLAP ModelKit Crack,ADO.NET和IList OLAP ModelKit是一个多功能的.NET OLAP组件&#xff0c;用C#编写&#xff0c;只包含100%托管代码。它具有XP主题的外观&#xff0c;并能够使用任何.NET数据源(ADO.NET和IList)。借助任何第三方组件(尤其是图表组件)呈现数据的能力扩展了产品…...

4 三组例子,用OpenCV玩转图像-AI-python

读取&#xff0c;缩放&#xff0c;旋转&#xff0c;写入图像 首先导入包&#xff0c;为了显示导入matplotlib/为了在matplotlib显示 导入CV2/查看版本 导入图片/查看图片类型 图片数组 数组大小 对于opencv通道顺序蓝色B、绿色G、红色R matplotlib通道顺序为 红色R、绿色G、蓝…...

计算机网络-三种交换方式

计算机网络-三种交换方式 电路交换(Circuit Switching) 电话交换机接通电话线的方式称为电路交换从通信资源分配的角度来看&#xff0c;交换(Switching)就是按照某种方式动态的分配传输线路的资源 电话交换机 为了解决电话之间通信两两之间连线过多&#xff0c;所以产生了电话…...

03 制作Ubuntu启动盘

1 软碟通 我是用软碟通制作启动盘。安装软碟通时一定要把虚拟光驱给勾选上&#xff0c;其余两个可以看你心情。 2 镜像文件 我使用清华镜像网站找到的Ubuntu镜像文件。 Index of /ubuntu-releases/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 请自己选择镜像…...

【JavaSE】String类中常用的字符串方法(超全)

目录 1.求字符串的长度 2.判断字符串是否为空 3.String对象的比较 3.1 判断字符串是否相同 3.2 比较字符串大小 3.3 忽略大小写比较 4.字符串查找 5.转化 5.1 数值和字符串转化 5.1.1 数字转字符串 valueof 5.1.2 valueOf的其他用法 5.1.3 字符串转数字 5.2 大小写转…...

Bootload U-Boot分析

Bootloader是在操作系统运行之前执行的一段小程序。通过这段小程序可以初始化硬件设备、建立内存空间的映射表&#xff0c;从而建立适当的系统软硬件环境&#xff0c;为最终调用操作系统内核做好准备。 对于嵌入式系统&#xff0c;Bootloader是基于特定硬件平台来实现的。因此…...

以公益之行,筑责任之心——2023年中创算力爱心公益助学活动

捐资助学是一项功在当代、利在千秋的义举。 高考录取工作已经开始&#xff0c;一张张高校录取通知书也陆续送达各位准大学生手中。当他们怀揣着对大学的好奇与憧憬&#xff0c;准备迈进理想的大学时&#xff0c;还有一群人&#xff0c;他们渴望知识&#xff0c;却因经济困难而…...

【机器学习】处理样本不平衡的问题

文章目录 样本不均衡的概念及影响样本不均衡的解决方法样本层面欠采样 &#xff08;undersampling&#xff09;过采样数据增强 损失函数层面模型层面采样集成学习 决策及评估指标 样本不均衡的概念及影响 机器学习中&#xff0c;样本不均衡问题经常遇到&#xff0c;比如在金融…...

Android前沿技术?Jetpack如何?

Jetpack Compose是Android开发领域的一项前沿技术&#xff0c;它提供了一种全新的方式来构建用户界面。近年来&#xff0c;Jetpack Compose在各大招聘等网站上的招聘岗位逐渐增多&#xff0c;薪资待遇也相应提高。本文将从招聘岗位的薪资与技术要求入手&#xff0c;分析Jetpack…...

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

因历史遗留原因&#xff0c;接手的项目没有代码提醒/格式化&#xff0c;包括 eslint、pretttier&#xff0c;也没有 commit 提交校验&#xff0c;如 husky、commitlint、stylelint&#xff0c;与其期待自己或者同事的代码写得完美无缺&#xff0c;不如通过一些工具来进行规范和…...

小研究 - MySQL 数据库安全加固技术的研究(一)

随着信息系统的日益普及&#xff0c;后台数据库的安全问题逐步被人们重视起来。以当下热门的MySQL 数据库为例&#xff0c;通过分析数据库的安全机制以及总结数据库面临的安全风险&#xff0c;针对性地提出了相应的加固策略&#xff0c;为数据库的安全加固工作提供了技术支撑。…...

linux安装redis带图详细

如何在Linux系统中卸载Redis 一、使用apt-get卸载Redis sudo apt-get purge redis-server如果使用apt-get安装Redis&#xff0c;可以使用apt-get purge命令完全卸载Redis。其中&#xff0c;purge命令会不仅仅删除Redis二进制文件&#xff0c;还会删除配置文件、数据文件和日志…...

MySql——数据库常用命令

一、关于数据库的操作 查看mysql中有哪些数据库 show databases;显示创建指定数据库MySQL语句 SHOW CREATE DATABASE 数据库名&#xff1a;使用指定数据库 use 数据库名;查看当前使用的是哪个数据库 select database();查看指定数据库下有哪些表 use 数据库名; -- 先选择…...

告别手动整理!Qwen3-ASR-1.7B帮你自动转写会议录音,5分钟部署即用

告别手动整理&#xff01;Qwen3-ASR-1.7B帮你自动转写会议录音&#xff0c;5分钟部署即用 1. 语音识别的新选择 还在为会议录音转写而烦恼吗&#xff1f;传统的手动转写不仅耗时耗力&#xff0c;而且准确率难以保证。Qwen3-ASR-1.7B语音识别模型的出现&#xff0c;彻底改变了…...

LongCat-Video-Avatar 正式发布,实现开源SOTA级拟真表现

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

多维创新打造强泛化智能体模型,LongCat-Flash-Thinking-2601技术报告

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

OpenClaw智能写作:Qwen3.5-9B根据截图生成技术博客

OpenClaw智能写作&#xff1a;Qwen3.5-9B根据截图生成技术博客 1. 为什么需要截图转技术博客的自动化方案 作为一名经常需要写技术文档的开发者和技术博主&#xff0c;我长期被两个问题困扰&#xff1a;一是截取了大量代码片段和报错信息后&#xff0c;整理成文章需要耗费大量…...

聚焦AI专著生成:热门工具大盘点,满足不同写作需求

创新是学术专著的核心&#xff0c;也是写作过程中最重要的挑战。一本优秀的专著&#xff0c;不仅仅是将已有的研究成果拼凑在一起&#xff0c;而是需要提出贯穿整个作品的独到见解、理论框架或研究方法。在浩如烟海的学术文献面前&#xff0c;发掘尚未被触及的研究空白并不简单…...

HunyuanVideo-Foley部署教程:vSphere虚拟机中GPU直通RTX4090D配置指南

HunyuanVideo-Foley部署教程&#xff1a;vSphere虚拟机中GPU直通RTX4090D配置指南 1. 环境准备与硬件要求 1.1 硬件配置清单 显卡&#xff1a;RTX 4090D 24GB显存&#xff08;必须&#xff09;CPU&#xff1a;10核及以上&#xff08;推荐Intel Xeon或AMD EPYC&#xff09;内…...

3个专业技巧:BilibiliDown跨平台B站视频下载器的完整应用指南

3个专业技巧&#xff1a;BilibiliDown跨平台B站视频下载器的完整应用指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mi…...

QuickLook.Plugin.OfficeViewer-Native:Office文件秒级预览的轻量化技术实现解析

QuickLook.Plugin.OfficeViewer-Native&#xff1a;Office文件秒级预览的轻量化技术实现解析 【免费下载链接】QuickLook.Plugin.OfficeViewer-Native View Word, Excel, and PowerPoint files with MS Office and WPS Office components. 项目地址: https://gitcode.com/gh_…...

质因数分解

题面 给定整数 a,b&#xff0c;如果 a%b0&#xff0c;则称 b 是 a 的因数。 现在给定一个整数 n&#xff0c;计算整数 n 的阶乘的因数个数。 输入格式: 一行输入一个整数 n(1≤n≤50)。 输出格式: 输出一个整数&#xff0c;表示 n! 的因数个数。 输入样例: 5 输出样例:…...

在ABAQUS中用SPH模拟倒酒过程,超有趣的小探索

ABAQUS模拟倒酒过程&#xff0c;酒用sph模拟最近在玩ABAQUS&#xff0c;突发奇想试试模拟倒酒过程&#xff0c;酒用SPH&#xff08;光滑粒子流体动力学&#xff09;方法来模拟&#xff0c;那效果简直绝了&#xff0c;跟大家分享分享我的折腾经历。 为啥选SPH模拟酒&#xff1f;…...