Vue3 —— 利用vite+vue创建一个vue3项目

news2025/1/17 15:52:54

前言

本文主要讲解如何利用vite+vue创建第一个项目以及vue3的基础知识点


一、创建一个vue3项目

这里我们主要介绍如何利用 vite+vue3创建项目

1.有关vite

Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

2.搭建第一个 Vite 项目

使用npm:

npm create vite@latest

使用 Yarn:

yarn create vite

创建步骤:

 

 如果你看到如下的图片,那就说明你的第一个vue3项目已经创建成功啦!

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AWS Lambda函数实战

AWS Lambda函数实战 实战效果&#xff1a;开发一个函数&#xff0c;它会关注事件中的某个名字&#xff0c;并返回“Hello<名字>&#xff01;”。如果输入事件没有提供名字&#xff0c;则函数返回一个更加通用的问候语“Hello World&#xff01;”。 AWS Lambda函数实战A…

vue后台实现点击图片放大

需求&#xff1a; 点击小图可以放大&#xff0c;放大后&#xff0c;通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。 代码 父组件&#xff1a; <template><div><!-- 放大图 --><el-image-vie…

数商云供应链管理系统助力化工行业企业实现客户订单管理可视化

订单管理是现代企业商务业务的重要组成部分&#xff0c;可以帮助企业解决订单管理低效、混乱等问题。随着产业互联网时代的到来&#xff0c;越来越多企业放弃传统费时费力的手动操作&#xff0c;开始应用数字化的管理工具来提高企业订单管理的水平。这里以化工行业企业为例&…

一文详解,数据仓库、数据库、数据中台、数据湖的区别

数据时代&#xff0c;各行业的企业都已经开始通过数据库来沉淀数据&#xff0c;但是真的论起数据库、数据仓库、数据中台&#xff0c;还是新出现的数据湖&#xff0c;它们的概念和区别&#xff0c;可能知道的人就比较少了&#xff0c;今天我们详细来比较了解一下。 数据仓库是…

ArrayList 和 LinkedList 之间应该怎么选择

这篇文章是来自知乎上的一个问题。 相信很多人在面试时都被问过这个问题&#xff0c;然后一般回答&#xff1a;ArrayList在指定下标访问时快&#xff0c;LinkedList在插入/删除元素时快。 其实这是一种人云亦云的谬误。可能最初有人这么回答&#xff0c;然后不加验证地转来转…

猿如意开发工具|JetBrains GoLand

一、猿如意是什么&#xff1f; 是CSDN推出的桌面客户端&#xff0c;旨在为广大开发者提供效率工具、文档、代码等优质工具和内容&#xff0c;提升开发者的学习和工作效率&#xff0c;详情点击&#x1f449;【猿如意官网】。为了让更多开发者更好的认识、了解、使用猿如意中的每…

项目管理(如何进行项目质量管理)

需要进行的工作&#xff1a; 1、规划项目质量管理&#xff1a;识别项目及其可交付成果的质量要求和/或标准&#xff0c;并书面描述项目将如何证明 符合质量要求和/或标准的过程。 2、管理质量&#xff1a;管理质量是把组织的质量政策用于项目&#xff0c;并将质量管理计划转化…

蓝桥杯嵌入式cubeMX自动生成的gpio.c文件解析

文章目录前言一、如何生成gpio.c文件二、gpio.c内部实现总结前言 这篇文章将带大家了解一下cubeMX自动生成的gpio.c文件。 一、如何生成gpio.c文件 在LED这篇文章中我们配置了控制LED的GPIO引脚&#xff0c;选择了PD2和PC8 PC9这三个引脚&#xff0c;并且将他们都设置为了输…

数图互通高校房产管理系统——住房管理

1、住房管理 1.1 住房档案 住房模块的管理主要是针对学校的承租住宅和已售住宅的管理&#xff0c;用于登记已售住宅的产权人信息&#xff0c;记录承租住宅的租赁起止日期、月租金等基本信息。 支持住房的坐落信息、楼栋、房间信息的维护。坐落位置主要维护校区编号、校区名称…

说明白正反向代理,以及Nginx和Gunicorn

一&#xff1a;什么是Nginx Nginx的产生 没有听过Nginx&#xff1f;那么一定听过它的"同行"Apache吧&#xff01;Nginx同Apache一样都是一种WEB服务器。基于REST架构风格&#xff0c;以统一资源描述符(Uniform Resources Identifier)URI或者统一资源定位符(Uniform …

图像质量评价指标metrics:PSNR 、SSIM、LPIPS

一、PSNR&#xff08;峰值信噪比&#xff09; 1.定义 是基于对应像素点间的误差&#xff0c;即基于误差敏感的图像质量评价&#xff0c;由于并未考虑到人眼的视觉特性&#xff08;人眼对空间频率较低的对比差异敏感度较高&#xff0c;人眼对亮度对比差异的敏感度较色度高&…

HTTP协议中的Cookie 和 Session

Cookie Session一 Cookie1.Cookie是什么?2.Cookie的工作机制二 Session1.Session的工作机制三 Cookie 和 Session 的区别一 Cookie 1.Cookie是什么? Cookie是一组键值对保存在客户端&#xff0c;服务器给浏览器的一组键值对(Sessionidxxxxxxx)通过Cookie来传递给客户端&…

比搞笑诺奖还离谱,看完国产AIGC最新创作,把我给整不会了

杨净 萧箫 发自 凹非寺量子位 | 公众号 QbitAI现在&#xff0c;AI生成的东西&#xff0c;“真实”得都让我有点害怕了——只是给出《马斯克获得诺贝尔物理学奖》这个标题&#xff0c;AI竟然就刷刷刷几下&#xff0c;蹦出了一整套大纲来&#xff1f;&#xff01;如果让AI生成一些…

5G WiFi 安信可 BW16 模组 RTL8720DN 入门笔记 2:Linux 搭建二次开发SDK开发环境,点亮一盏LED灯。

首先按照环境所依赖的包&#xff1a; sudo apt-get install git wget libc6-i386 lib32ncurses5 make bc gawk ncurses-dev 开始获取SDK源码&#xff0c;并且修改权限&#xff1a; git clone https://github.com/ambiot/ambd_sdk.git sudo chmod -R 777 ambd_sdk然后开始编译…

傻白入门芯片设计,三大基本定律(十)

1.摩尔定律&#xff08;Moores Law&#xff09;&#xff1a;集成电路上可以容纳的晶体管数目在大约每经过18个月到24个月便会增加一倍。换言之&#xff0c;处理器的性能大约每两年翻一倍&#xff0c;同时价格下降为之前的一半。。 2.登纳德缩放定律&#xff08;Dennard Scalin…

一些跨平台技术方案的经验参考

今天就站在一个小开发的视角分享一下一个小项目是如何进行跨平台方案选型的 本系列文章先站在公司的的角度对产品技术选型进行分析&#xff0c;然后再根据我们项目实际开发经验进行汇总&#xff0c;供大家参考。 目前大前端技术也非常丰富&#xff0c;可以实现&#xff0c;一…

Shader中需要数学知识

在Shader的学习中&#xff0c;我们可能需要一些数学知识&#xff0c;我也是学习了一段时间&#xff0c;之前数学的知识都忘了&#xff0c;重新来一遍吧&#xff0c;我把学习的点分享一下。 向量&#xff1a; 点乘&#xff1a; 向量A向量B A向量的模 * B向量的模 * cosθ 一般…

深度学习与总结JVM专辑(五):类加载机制

类加载机制前言什么是类加载机制类的生命周期类的加载&#xff1a;查找并加载类的二进制数据链接验证&#xff1a;确保被加载的类的正确性验证&#xff1f;有必要吗准备&#xff1a;为类的静态变量分配内存&#xff0c;并将其初始化为默认值解析&#xff1a;把类中的符号引用转…

ZooKeeper 避坑实践:如何调优 jute.maxbuffer

作者&#xff1a;子葵 背景 在日常运维 ZooKeeper 中&#xff0c;经常会遇到长时间无法选主&#xff0c;恢复时进程启动又退出&#xff0c;进而导致内存暴涨&#xff0c;CPU飙升&#xff0c;GC频繁&#xff0c;影响业务可用性&#xff0c;这些问题有可能和 jute.maxbuffer 的…

Kotlin高仿微信-第17篇-单聊-转账

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…