vite介绍
vite
vite是一种新的前端构建工具，vite借助了浏览器对ESM的支持，采用和传统webpack打包完全不一致的unbundle打包机制；
vite的快主要体现在两个方面，快速的冷启动和快速的热更新
快速的冷启动：vite只需启动一台静态页面的服务器， 不需要打包项目全部文件， 服务器根据客户端的请求加载不同的模块处理， 实现按需加载， 而webpack则是一开始就将整个项目打包一遍，再开启dev-server，如果项目规模庞大， 打包时间必定很长。
打包编译速度：当需要打包到生产环境时， vite使用传统的rollup进行打包， 所以vite的优势是体现在开发阶段。
热模块更新：当某个模块内容改变时， 让浏览器重新请求改模块即可， 而不是像webpack那样重新将该模块的所有依赖重新编译。
vite的优点（unbundle机制的核心）
模块之间的依赖关系由浏览器解析 文件的转换由dev server 的middleware实现并做缓存 不对源文件做合并捆绑操作vite的缺点
由于unbundle机制， 首屏期间懒加载方面需要额外做一下工作：和webpack相比， vite把需要在dev server启动过程中完成的工作转移到dev server 响应浏览器的请求过程中，不可避免的造成首屏加载性能下降。不过首屏性能差只发生在dev server 启动后第一次加载页面的时候， 之后再重新加载页面时， 性能会好很多， 原因是dev server会将之前已经完成转换的内容缓存下来。不对文件做捆绑操作， 导致大量的HTTP请求 初次加载阻塞首屏请求
使用vite创建项目
之前使用vue-cli脚手架时， 需要先把vue-cli安装在全局中， 以便后面创建项目使用， 而vite构建工具是不需要全局安装的， 可以通过下面的命令进行创建；注意vite需要的node版本14.18+， 有些模块的依赖需要更高的node.js版本。
创建项目的命令
vue create vite@latest
然后输入文件名， 选择框架，选择语言
另一种创建方式，可以选择创建router文件
npm init vue@latest
相关文章：
vite介绍
vite vite是一种新的前端构建工具，vite借助了浏览器对ESM的支持，采用和传统webpack打包完全不一致的unbundle打包机制； vite的快主要体现在两个方面，快速的冷启动和快速的热更新 快速的冷启动：vite只需启动一台静态页…...
2023年软件测试常见面试题
测试花费的成本，要深入在那个环节上，（前提准备上，需求理解上，业务逻辑，排错上，业务名词上理解，通过什么样的方法，有谁能解决这样的问题） 软性热身题 1.自我…...
关于const指针的一个常见误区
关于const，我曾因为其在C和C中的不同，还有一些编译器对未定义的处理不同，搞得晕头转向… 后来有次在阅读《C primer plus》中我终于梳理了有关const的结论。 1.const基础知识 首先要明白const的难点在于修饰指针的时候，对于con…...
@alilclowcode-engine-ext@1.0.5 不支持安装react@^16.3.0
alilclowcode-engine-ext1.0.5 不支持安装react^16.3.0 https://github.com/alibaba/lowcode-demo https://lowcode-engine.cn/site/docs/demoUsage/intro https://github.com/alibaba/lowcode-engine https://docs.appsmith.com/getting-started/setup/installation-guides?…...
Python之列表操作和内存模型
Python之列表操作和内存模型 列表list 一个排列整齐的队伍，Python采用顺序表实现 列表内的个体称作元素，由若干元素组成 列表 元素可以是任意对象(数字、字符串、对象、列表等) 列表内元素有顺序，可以使用索引 线性的数据结构 使用 [ ] …...
实习面试记录
湖南某操作系统中厂（9月） 首先是科研项目相关的问题，然后是其他问题如下： STL中，vector,map和unorded_map底层是怎么实现的？ 在C标准库中，vector和map都是基于模板类实现的容器。 vector底层…...
总结/笔记-vue中的插槽（默认插槽、具名插槽、作用域插槽）
问题： 遇到了一个插槽，写法为 #default ”{ row }“ 插槽知识点： 定义 插槽，用于 在组件中 引用外部组件或自定义组件的内容。 即 子组件中提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代…...
QTday5（QT连接TCP通信）
一、Xmind整理： C语言中的通信协议： 二、上课笔记整理： 1.QT中的服务器端的操作： .pro文件： 头文件： #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务…...
【Docker】安装RabbitMQ
1、拉取 RabbitMQ 镜像 docker pull rabbitmq2.创建并运行容器 docker run -it --name test-rabbitmq -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSuispig -p 15672:15672 -p 5672:5672 -d rabbitmq参数说明–name是 容器别名-d表示后台运行-p将 宿主机 5672端口…...
【如何获取数据库表的字段并拼接】
获取数据库表的字段并拼接 需求场景操作步骤获取该数据库对应表中所有的字段对获取到的字段进行处理 需求场景 在写sql语句时，我要获取到该表的大部门字段来做处理，一个个粘贴复制太费事了，所以我决定执行sql语句把表中字段查询出来 操作步…...
Oracle中LEFT JOIN后AND与WHERE的异同
1、AND 过滤之后再连接 2、WHERE 连接之后再过滤 下面以具体例子来说明： (1)、建表及插入测试数据 --建测试表 create table FACT_TAB ( ID INTEGER,STATUS VARCHAR2(8) ); create table DIM_STATUS ( STSTUS_CLASS VARCHAR2(8),STATUS_CODE VARCHAR2(8),S…...
Flink实时计算中台Kubernates功能改造点
背景 平台为数据开发人员提供基本的实时作业的管理功能，其中包括jar、sql等作业的在线开发；因此中台需要提供一个统一的SDK支持平台能够实现flink jar作业的发布；绝大多数情况下企业可能会考虑Flink On Yarn的这个发布模式，但是伴随云原生的呼声越来越大，一些企业不希望部…...
GO远程构建并调试
GO远程调试 之前写C，一直习惯了本地IDERemote CMake/GDB编译调试的模式。 因为6.824课程需要用GO，好像没有特别好的支持。记录一下如何配置调试的。 IDE: Goland 操作系统：Windows 远程服务器：Ubuntu 首先配置SSH,让其可以连接到…...
react使用hook封装一个search+input+checkbox组件
目录 react使用hook封装一个searchinputcheckbox组件searchPro.jsx使用组件效果 react使用hook封装一个searchinputcheckbox组件 searchPro.jsx import { Checkbox, Input } from "antd"; import React, { useEffect, useState } from "react"; import S…...
【6】uniform颜色写入
之前的Basic.shader: #shader vertex #version 330 corelayout(location 0) in vec4 position;void main() {gl_Position position; };#shader fragment #version 330 corelayout(location 0) out vec4 color;void main() {color vec4(1.0, 0.0, 0.0, 1.0); };这里color …...
自然语言处理历史史诗：NLP的范式演变与Python全实现
目录 一、引言什么是自然语言处理？语言与人类思维自然语言的复杂性NLP的历史轨迹 二、20世纪50年代末到60年代的初创期符号学派重要的研究和突破 随机学派重要的研究和突破 三、20世纪70年代到80年代的理性主义时代基于逻辑的范式重要的研究和突破 基于规则的范式重…...
网络协议从入门到底层原理学习（二）—— Mac地址/IP地址
文章目录 网络协议从入门到底层原理学习（二）—— Mac地址/IP地址1、MAC地址2、MAC地址的表示格式3、MAC地址表4、MAC地址操作5、MAC地址的获取6、ARP7、ICMP8、IP地址9、IP地址的分类和格式10、不同分类的IP地址的范围11、特殊 IP 地址12、子网掩码13、子…...
2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆
2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆...
WebClient vs HttpClient：异同对比
在 Java 开发中，进行网络通信是常见的需求。WebClient 和 HttpClient 是两种常用的用于发送 HTTP 请求的工具。它们都具有相似的功能，但在实现细节和用法上存在一些差异。本文将详细介绍 WebClient 和 HttpClient 的异同，帮助您选择适合您项目…...
ES6中导入import导出export
ES6使用 export 和 import 来导出、导入模块 用法 /** 导出 export *///分别导出 export let name 孙悟空; export function sum(a, b) {return a b; } } //先定义再导出 let age 18 export {age}/** 默认导出 export default */const a 默认导出; export default a;/**…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
【JavaEE】-- HTTP
1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...