如何创建vite项目!

vite

官网:vite是一种新型前端构建工具,能够显著提升前端开发体验

网络:vite是一个静态服务器,也可以说是一个开发的构建工具

它的目标就是提供快速的开发体验和性能优化

vite优点与缺点

Vite 优点Vite 缺点
开发服务器比 Webpack 快 10-100 倍只能针对现代浏览器(ES2015+)
将 code-splitting 作为优先事项与 CommonJS 模块不完全兼容
快速响应的模块更新热重载(HMR)最小的脚手架不包括 Vuex、路由器等
不同的开发服务器与构建工具

快速启动、轻量、现代化、配置流程简单。

创建项目

1.初始化项目
npm init vite@latest
​
或者
​
npm create vite@latest

配置项目的基本信息

创建完成的样子

如果已经全局安装过就可以直接下一步

2.安装默认依赖
  • 项目的名称

  • 基础模板

  • 是否使用typescript

预览效果

输入以下指令 在这里插入图片描述在这里插入图片描述

至此,一个vue3的项目已经成功创建出来了

1.安装依赖:终端里安装:

npm install             yarn

2.运行开发服务器:启动vite

npm run dev             yarn dev

3.进行开发:你可以在项目中进行开发。

4.构建项目:当你完成了开发,准备部署时:

npm run build           yarn build

Vite 会根据配置将项目代码打包、优化和压缩,并生成可用于生产环境部署的静态文件。

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

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

相关文章

flink部署模式介绍

在一些应用场景中,对于集群资源分配和占用的方式,可能会有特定的需求。Flink 为各种场景提供了不同的部署模式,主要有以下三种,它们的区别主要在于: 集群的生命周期以及资源的分配方式;应用的 main 方法到…

宠物空气净化器推荐哪个好?实惠的猫用猫用净化器牌子测评

作为宠物主人,我们深知养宠物的乐趣和责任,但同时也面临着一些挑战,比如宠物掉毛、异味和空气质量等问题。这就是为什么越来越多的家庭选择宠物空气净化器,为我们创造一个清新、健康的室内环境。 无论我们多么爱我们的毛茸茸伙伴…

[RK-Linux] 移植Linux-5.10到RK3399(九)| 配置USB-A支持HOST功能

文章目录 一、原理图二、设备树三、功能验证一、原理图 RK3399 的 USB 控制器接口如图: 其中 USB PHY0 的 HOST0_DP、HOST0_DM 网络没有使用。 USB PHY0 的 TYPEC0_DP、TYPEC0_DM、TYPEC0_U2VBUSDET 网络用作 type-c 接口。 USB PHY1 的 HOST1_DP、HOST1_DM 网络用作 USB2.…

仰暮计划|“日子过得苦为什么还要生三个小孩呢”

故事的主角是我的奶奶,今年74岁。她的个子不高,但她的脊背笔挺,透露着难掩的坚毅,从她的独家记忆中,更证实了这一点。 少年担责 “奶奶,给我讲讲你小时候吧。” 还没开口,奶奶的眼中泛起了点点…

C# wpf利用Clip属性实现截屏框

wpf截屏系列 第一章 使用GDI实现截屏 第二章 制作截屏框(本章) ______第一节 使用DockPanel制作截屏框 ______第二节 利用Clip属性实现截屏框(本节) 第三章 实现截屏框热键截屏 第四章 实现截屏框实时截屏 第五章 使用ffmpeg命令行实现录屏 文章目录 wp…

pnpm使用

文章目录 前言一、安装二、设置镜像三、使用总结如有启发,可点赞收藏哟~ 前言 pnpm 全称 performant npm,意思为 高性能的 npm 速度快、节约磁盘空间、支持 monorepo、安全性高。 一、安装 npm install -g pnpm or brew install pnpm二、设置镜像 #…

每日一题 670. 最大交换(中等,后缀)

先考虑最简单的情况,如果在首位之后有比它大的数字,那么显然交换这两个数字是最优解其次如果比它大的数字在后面不止出现了一次,那面显然是用最后一次出现的那个位置进行交换(要使值最大,低位要小,高位要大…

MAXWELL

MAXWELL 一、maxwell是什么 maxwell 官网地址:http://maxwells-daemon.io/ 因为官网是纯英文的,倒是不难懂,但总觉得写的略粗糙(也可能笔者英文水平确实拉胯,有待提高)。所以还是自己百度了一下。 当my…

WhatsApp会话信息该如何备份以及还原

对于出海企业来说,WhatsApp是和客户沟通的必备软件之一。无论是聊单还是询盘都可以在WhatsApp上进行,所以WhatsApp上通常存储了很多交易信息。但是WhatsApp软件本身是端对端加密,所以它不会像其他社交软件一样帮你自动在后台备份,…

制造业管理软件:为何ERP替代不了MES?

一、ERP和MES的功能区别 ERP是一种综合性的企业管理软件,它涵盖了企业的各个方面,包括财务、采购、库存、销售、人力资源等。它的主要功能是将企业内部的各项业务整合为一个整体进行管理,实现信息共享和协同工作。ERP的主要特点是可以对企业…

HackTheBox - Medium - Linux - Noter

Noter Noter 是一种中型 Linux 机器,其特点是利用了 Python Flask 应用程序,该应用程序使用易受远程代码执行影响的“节点”模块。由于“MySQL”守护进程以用户“root”身份运行,因此可以通过利用“MySQL”的用户定义函数来利用它来获得RCE并…

c语言小游戏之扫雷

目录 一:游戏设计理念及思路 二:初步规划的游戏界面 三:开始扫雷游戏的实现 注:1.创建三个文件,test.c用来测试整个游戏的运行,game.c用来实现扫雷游戏的主体,game.h用来函数声明和包含头文…

【立创EDA-PCB设计基础】5.布线设计规则设置

前言:本文详解布线前的设计规则设置。经过本专栏中的【立创EDA-PCB设计基础】前几节已经完成了布局,接下来开始进行布线,在布线之前,要设置设计规则。 目录 1.间距设置 1.1 安全间距设置 1.2 其它间距设置 2.物理设置 2.1 导…

枚举类型有着一篇足以

✅作者简介:大家好,我是橘橙黄又青,一个想要与大家共同进步的男人😉😉 🍎个人主页:橘橙黄又青-CSDN博客 1.关键字enum的定义 enum是C语言中的一个关键字,enum叫枚举数据类型&#…

JavaScript基础之JavaScript引入方式

JavaScript引入方式 JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,一般以下方式: 外部方式内部方式JavaScript元素事件通过JavaScript伪URL引…

Spring Boot 4.0:构建云原生Java应用的前沿工具

目录 前言 Spring Boot简介 Spring Boot 的新特性 1. 支持JDK 17 2. 集成云原生组件 3. 响应式编程支持 4. 更强大的安全性 5. 更简化的配置 Spring Boot 的应用场景 1. 云原生应用开发 2. 响应式应用程序 3. 安全性要求高的应用 4. JDK 17的应用 总结 作…

【射影几何11】完全四边形和交比研究

一、说明 对于交比的灵活应用,尚有许多情况需要讨论,首先引出完全四边形的例子,该关键词的应用非常普遍;其次,我们尝试用交比证明一些事实;随后我们又引出交比射影案例的特殊情况。 二、完全四边形 2.1 完…

Excel 动态可视化图表分享

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战, ETL Informatica 数据仓库案例实战 Excel 2021实操 100集, Excel 2021函数大全 80集 Exc…

SqlAlchemy使用教程(五) ORM API 编程入门

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用SqlAlchemy使用教程(五) ORM API 编程入门 前一章用SQL表达式(SQL Expr…