Vue3:用vite创建Vue3项目

一、简介

vite是新一代前端构建工具,官网地址:https://vitejs.cn
vite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
    webpack构建:
    在这里插入图片描述
    vite构建:
    在这里插入图片描述
    对比看来,vite的构建,可以类比懒加载技术,用到哪个模块,在构建哪个模块。

二、案例

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

在平时学习中
√ Add ESLint for code quality? Yes
可以选择No
关闭代码质量检查

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【计算机那些事】

目录 【云计算】 【原神用的是UDP还是TCP】 【几个特殊地址】 【socket是什么】 【内网穿透是什么】 【为什么有HTTP协议,还要有websocket协议】 【科普路由器,集线器,交换机,网桥,光猫】 【USB接口那些事】 …

MacOS包管理工具homebrew使用教程

MacOS包管理工具homebrew使用教程 1.概述与安装2.基本使用3.其他常用命令 1.概述与安装 homebrew是Mac OS X上的强大的包管理工具,可以高效管理各种软件包 安装: 1、安装xcode: xcode-select --install2、一行命令下载: /bin…

个人项目介绍3:火车站篇

项目需求: 一比一精确显示火车站主建筑和站台模型。实时响应车辆信息(上水,吸污,换乘)并同步显示,实时响应车辆进出站信息,并以动画形式模拟。实时响应报警信息,并能在三位中显示&a…

快速搭建Vue前端框架

快速搭建Vue前端框架 安装Vue Vue官方安装过程:https://cli.vuejs.org/zh/guide/installation.html 二.创建Vue工程 2.2 安装淘宝镜像 安装淘宝镜像(会让你安装Vue的速度加快): npm config set registry https://registry.npm.taobao.or…

【内推】金山办公 2024届 春季校园招聘

有需要内推的小伙伴吗? 金山办公 各岗位均有 面向应届生春招 QQ群:723529936 内推码:NTASYQI

十秒学会Ubuntu命令行:从入门到进阶

一、引言 在使用Ubuntu操作系统时,命令行界面(CLI)是不可或缺的一部分。对于初学者来说,掌握基本的命令行操作可以帮助他们更高效地管理系统和软件。本文将介绍一些常见的Ubuntu命令以及如何解决与命令行相关的问题。 二、常用Ubu…

【C语言】内存操作篇---动态内存管理----malloc,realloc,calloc和free的用法【图文详解】

欢迎来CILMY23的博客喔,本篇为【C语言】内存操作篇---动态内存管理----malloc,realloc,calloc和free的用法【图文详解】,感谢观看,支持的可以给个一键三连,点赞关注收藏。 前言 在学完结构体后(…

本地搭建xss平台并获取cookie演练

前言 一般而言,搭建xss平台是不被允许的,但是由于教育的目的,搭建xss平台更能让学习者更加直观感受xss漏洞对我们的危害和它的重要性。 搭建xss平台 1.搭建xss平台的基础是在phpstudy一个集成环境上的,所有第一步要安装phpstudy&a…

ardupilot 及PX4姿态误差计算算法对比分析

目录 文章目录 目录摘要1.APM姿态误差计算算法2.PX4姿态误差计算算法3.结论摘要 本节主要记录ardupilot 及PX4姿态误差计算算法差异对比过程,欢迎批评指正。 备注: 1.创作不易,有问题急时反馈 2.需要理解四元物理含义、叉乘及点乘含义、方向余弦矩阵含义、四元数乘法物理含…

Linux环境基础开发工具使用

目录 1.Linux软件包管理器yum 什么是软件包 关于 lrzsz 查看软件包 2.Linux开发工具 2.1.vim的基本概念 2.2vim的基本操作 2.3vim命令模式命令集 1.插入模式 2.从插入模式切换为命令模式 3.移动光标 4.删除文字 5.复制 6.替换 7.撤销上一次的操作 8.更改 2.4v…

Windows10笔记本亮度调节按键失灵

操作:任务管理器 -> 监视器 -> 右键点击 -> 通用即插即用监视器 -> 更新驱动程序 -> 浏览我的电脑以查找我的驱动程序 -> 让我从计算机上的可用驱动程序列表中选取 -> 点击通用即插即用监视器 -> 点击关闭 -> 重启电脑。 第一步&#x…

第三百八十二回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何修改按钮的形状"相关的内容,本章回中将介绍NavigationBar组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…

波奇学Linux:进程通信之命名管道

进程通信的前提:让不同的进程看到同一份文件 匿名管道只能具有血缘关系的进程,毫不相关的进程通信得要命名管道 管道文件不需要刷盘,基于内存级文件 命名管道通过路径文件名确定打开同一个文件,在匿名管道中利用父子进程。 创…

(学习日记)2024.02.29:UCOSIII第二节

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

总结:React 中的 state 状态

☝️上文提及:可以通过组件中的重要信息是否由组件自身 state 还是外部 prop 驱动来区分「受控组件」&「非受控组件」。 换言之,props 是对外的,state 是对内的 props:只读,父组件通过 props 传递给子组件其所需要…

AI预测福彩3D第一弹【2024年3月4日预测】

众所周知,深度学习算法(AI算法)由于其内部含有庞大数量的神经元,理论上能够拟合任意维度的数据,目前在大数据分析领域应用非常广泛,并且能够很好的挖掘数据规律,对相关数据进行预测分析。 前面一…

Tomcat源码解析(二): Bootstrap和Catalina

Tomcat源码系列文章 Tomcat源码解析(一): Tomcat整体架构 Tomcat源码解析(二): Bootstrap和Catalina 目录 前言一、启动类Bootstrap1、main2、init3、load与start 二、加载Catalina1、load2、start2.1、注册shutdown钩子2.2、监听shutdown命令2.3、停止…

从零开始学习Netty - 学习笔记 -Netty入门【协议设计和解析】

2.协议设计和解析 协议 在计算机中,协议是指一组规则和约定,用于在不同的计算机系统之间进行通信和数据交换。计算机协议定义了数据传输的格式、顺序、错误检测和纠正方法,以及参与通信的各个实体的角色和责任。计算机协议可以在各种不同的层…

【PCL】 (十六)点云距离图可视化

&#xff08;十六&#xff09;点云距离图可视化 以下代码实现点云及其对应距离图的可视化。 数据样例&#xff1a;sphere100.pcd range_image_visualization.cpp #include <iostream>#include <pcl/range_image/range_image.h> #include <pcl/io/pcd_io.h&g…

C++11常用知识分享(二)【可变参数模板 || lambda表达式 || 包装器】

目录 一&#xff0c;可变参数模板 1. 递归方法展开参数包 2. 逗号表达式展开参数包 3&#xff0c;可变参数模板优势 二&#xff0c;lambda表达式 1. lambda表达式语法 2. 注意点 三&#xff0c;包装器 1. bind(了解) 嗨&#xff01;收到一张超美的风景图&#xff0c;希…