Vue3 —— 怎样利用vite创建一个vue3项目

news2024/12/25 9:18:20

前言

本文主要讲解如何利用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/53660.html

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

相关文章

【目标检测】Faster R-CNN论文代码复现过程解读(含源代码)

目录:Faster R-CNN论文代码复现过程解读Faster R-CNN代码使用说明书(分享在github上)一、代码的地址二、我的配置环境三、参数值文件下载四、VOC数据集下载五、模型训练步骤(1)训练VOC0712数据集1.数据集的准备2.数据集…

做电商太难了。。

阅读本文大概需要 1.86 分钟。上周跟在杭州做电商的朋友交流了一下,发现他们太难了。前些天不还有说现在全国 65% 的快递网点都停摆了,这对电商影响非常大,最直接的就是物流快递的问题,一堆快递堆在那里发不出去。虽然直播间卖得算…

win11 右键关闭显示更多选项 修改右键菜单

建议直接使用方法三 win11右键显示更多选项怎么关闭? Win11右键显示更多选项怎么关闭?本文将为您介绍4个简单有效的解决方法,您可以根据自身实际情况来挑选一个更加适合自己的方案! 方法一:更改文件资源管理器选项恢…

高质量项目管理-甘特图模板+教程(附下载包)/ PMP项目管理可用

做项目管理的少不了用到甘特图,但项目流程那么多,每个都一一去做一个甘特图又需要耗费非常大的时间。所以这里给大家收集了一些甘特图模板教程,供大家参考学习! 科普一下:甘特图(Gantt chart)又…

皕杰报表之隐藏处理

第一步,新建报表,然后新建参数 参数type设置成中文描述为统计类型、数据类型为字符串。 参数year设置成中文描述为年、数据类型为日期、时间日期格式为yyyy。 参数month设置成中文描述为月、数据类型为日期、时间日期格式为MM。 参数day设置成中文描…

腾讯安全在2022:出租车、地铁和爆发的火山

“它就像是一个烧锅炉的过程,整个过程会很漫长。但前面蒸汽没出来是没效果的,不可能这个锅烧两下,这个锅烧两下,最后哪个都不开。一旦确定方向,我们就会坚定地朝这个方向走,从上至下坚定生态的持续投入&…

element-tiptap和vuedraggable的拖拽冲突

今天写项目的时候,遇到一个问题,分享给大家。 场景 我有一个A区域,还有一个B区域。A区域内的Vue组件可以通过Vuedraggable这个框架来拖拽到B区域中。B区域内的Vue组件在标题上使用了element-tiptap组件(用来高级编辑&#xff09…

上海发布:应对产业封锁,出台硬核政策扶持集成电路,最高奖励3000万!

上海张江科学城,聚集了全上海超六成集成电路企业 前 言 11月23日,上海市经济信息化委、市财政局发布了关于印发 《上海市集成电路和软件企业核心团队专项奖励办法》的通知。 该文件提出,上海市将在未来5年,对符合要求的集成电路和…

idea打包springboot项目成 docker 镜像方法 (详细)

idea打包springboot项目 详细方法 么有比这个更详细的了 双击package 生成.jar文件 文件生成位置如下图 将041-springboot-thymeleaf-1.0.0.jar 上传到/root/myspringboot文件夹中 默认已经安装好docker linux 操作 cd /root/myspringboot vim Dockerfile bash From openjd…

【leetcode】2273. 移除字母异位词后的结果数组(js实现)

1. 题目 https://leetcode.cn/problems/find-resultant-array-after-removing-anagrams/description/?languageTagsjavascript 2. 思路 对于每个单词,用哈希表统计每个字符出现的次数,前后两个字母进行比较。如果比较以后发现是字母异位词&#xff…

详解设计模式:策略模式

策略模式(Strategy Pattern)也被称为政策模式(Policy Pattern),是在 GoF 23 种设计模式中定义了的行为型模式。 策略模式 是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,使得它们…

BiLSTM-CRF模型 我必须要你能看懂

文章目录BER任务介绍BiLSTM模型介绍----------------------------------------------------------------------------------------------------模型细节如果没有CRF层会是什么样CRF 层CRF原理:一、CRF基础1、条件概率2、图、无向图3、概率图4、马尔可夫性5、概率无向…

rpm包常用命令指南

目录 rpm包查看一般命令 查看系统已安装软件相关命令 卸载rpm包 按照yum源的repo 卸载软件 查询系统已安装的rpm包 查询系统中一个已知的文件属于哪个rpm包 查询已安装的软件包的相关文件的安装路径 查询一个已安装软件包的信息 查看已安装软件的配置文件 查看已安装软…

一文带你走进网络编程

网络编程 什么是网络编程: 就是用来实现网络互通的不同计算机运行程序之间进行数据的交换的编程 网络模型 OSI(模型):七层协议 应用层: 如: HTTP协议 主要解决如何包装数据,用于通信的应用程序和用于消息传输的底层网络提供接口,提供常见的网络应用…

VM系列振弦采集模块全频段扫频

VM系列振弦采集模块全频段扫频 根据起始频率与终止频率范围,频率由低向高向传感器发送渐进的扫频激励信号,直到传感器产生共振并返回共振电流信号。在输出激励信号的过程中,激励信号的频率变化由频率步进和信号周期数量决定。 此激励方法较为…

Day2--使用ESP32双核、U8G2 OLED任务、任务以绝对频率运行、任务内存优化

使用ESP32双核 ESP32-C系列为单核,ESP32的core0主要运行WI-FI和蓝牙 API: xPortGetCoreID() 获取当前任务运行的核心 xTaskCreate() 有系统选择运行核心,优先选择0 xTaskCreatePinnedToCore() 指派任何给指定核心 Arduino的setup和loop默认运行在core1 …

初识Thread类与创建多线程的方法

目录 1.创建一个线程 2.start()方法与run()方法 3.查看线程 4.创建线程的各种方法 4.1实现Runnable接口 4.2使用匿名内部类 4.3使用匿名内部类,实现Runnable 4.4使用Lambda表达式 1.创建一个线程 Java操作线程最核心的类就是Thread类 创建线程有很多方法,下面我们写一…

[附源码]计算机毕业设计springboot人体健康管理app

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

SpringBoot结合XXL-JOB实现定时任务

《从零打造项目》系列文章 工具 比MyBatis Generator更强大的代码生成器 ORM框架选型 SpringBoot项目基础设施搭建SpringBoot集成Mybatis项目实操SpringBoot集成MybatisPlus项目实操SpringBoot集成Spring Data JPA项目实操 数据库变更管理 数据库变更管理:Liquibase…

阿里自爆秋招面试笔记,福音来了

前言 最近又掀起了一股面试招聘风潮,我们一边要巩固基础知识、备战试题的同时,另外与面试官的对达沟通也直接影响你的成功与否!那我们应该如何做好准备呢? ​先说面试过程,今天阿鑫给大家整理了这三个小经验&#xf…