vue3的介绍和两种创建方式(cli和vite)

news2025/1/13 3:00:27

目录

一、vue3的介绍

(一)vue3的简介

(二)vue3对比vue2带来的性能提升 

二、vue3的两种创建方式

方式一:使用vue-cli创建(推荐--全面)

操作步骤 

方式二:使用vite创建

操作步骤


一、vue3的介绍

(一)vue3的简介

2020年9月18日发布3.0版本。代号海贼王(One piece)

其中耗时两年多、2600次提交、30+RFC、600+PR、99位贡献者

(二)vue3对比vue2带来的性能提升 

1.更快的渲染速度:Vue 3使用了新的虚拟DOM实现,可以更快地渲染页面,减少页面的闪烁和卡顿。初次渲染快55%,更新渲染快133%

2.更好的TypeScript支持:Vue 3引入了全面的TypeScript支持,包括类型检查和代码提示。

3.更好的响应式系统:Vue 3的响应式系统比Vue 2更加灵活和高效,可以更好地处理嵌套数据和响应式数组。

4.更好的组件封装:Vue 3引入了Composition API,它可以更好地封装组件的逻辑和状态,并使代码更具可读性和可维护性。内存减少44%

5.更少的包大小:Vue 3的核心库比Vue 2小得多,这意味着更快的下载速度和更少的资源占用。减少41%

6.更好的Tree-Shaking:Vue 3的模块系统使用ES模块,可以更好地支持Tree-Shaking。

总的来说,Vue 3在性能、开发体验和代码组织方面都有所改进,使得它更加适合于大型、复杂的应用程序开发。 

二、vue3的两种创建方式

前提条件:需要node版本10以上 

方式一:使用vue-cli创建(推荐--全面)

前提条件

@vue/cli版本在4.5.0以上

查看方式

vue --version

安装或者升级方式

1.卸载旧的

npm uninstall vue-cli -g

2.安装新的

npm install -g @vue/cli

操作步骤 

1.创建一个文件夹,选择在终端打开

 2.vue create命令 +自定义项目名字

 vue create v1

3.上下键选择这个自定义的版本,然后回车

 

 4.按空格键选中,完成后按回车键

 5.选择3的版本回车

 6.选择y,然后回车键

 7.选择第一个回车

 8.选择第一个回车

9.是否要把此配置设置为以后建立项目的默认选项,选择N

 10.按照给出的提示继续输入

 

 11.建访完成并创问这个网址

访问成功 

方式二:使用vite创建

vite是新一代前端构建工具

优势:

开发环境中,无需打包操作,可快速的冷启动

轻量快速热重载

真正的按需编译,不再等待整个应用编译完成

操作步骤

1.创建一个文件夹,选择在终端打开

2.输入npm init vite-app命令  +自定义项目名称 

npm init vite-app v2

3.选择y回车

4.根据提示继续输入命令

5.建立完成启动访问网页

npm run dev

6. 访问成功

有什么问题都可以评论区留言,看见都会回复的

如果你觉得本篇文章对你有所帮助的,多多支持吧!!!

点赞收藏评论,当然也可以点击文章底部的红包或者订阅给文章创作支持一下了。抱拳了!

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

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

相关文章

Spring是什么?关于Spring家族

初识Spring 什么是Spring? Spring是一个开源的Java企业级应用程序开发框架,由Rod Johnson于2003年创建,并在接下来的几年里得到了广泛的发展和应用。它提供了一系列面向对象的编程和配置模型,支持开发各种类型的应用程序&#x…

黑客网站攻击的主要手段

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 黑客与白帽子 有的童鞋觉得黑客和白帽子是同一回事儿,其实不然;而且,他们的工作方式与目标也有很大的差异。 黑客是指一群专门使用计算机…

9.2 变量的指针和指向变量的指针变量

9.2 变量的指针和指向变量的指针变量 一.指针变量的定义二.指针变量的引用三.整理至https://appd872nnyh9503.pc.xiaoe-tech.com/index的笔记 一.指针变量的定义 变量的指针 就是变量的地址。 我们可以定义一个指向 变量 的指针变量。 这种指针变量,我们在定义的时…

信创办公–基于WPS的EXCEL最佳实践系列 (筛选重要数据)

信创办公–基于WPS的EXCEL最佳实践系列 (筛选重要数据) 目录 应用背景操作步骤1、筛选2、高级筛选 应用背景 在WPS里,筛选有两种,一种是筛选,另外一种则是高级筛选。 操作步骤 1、筛选 可以根据学号、准考证号、考…

MyBatisPlus基础入门学习

系列文章目录 MyBatisPlus基础入门学习 文章目录 系列文章目录前言一、MyBatisPlus简介1.入门案例2.MyBatisPlus概述 二、标准数据层开发1.标准数据层CRUD功能2.分页功能 三、DQL控制1.条件查询方式2.查询投影3.查询条件设定4.字段映射与表名映射 四、DML控制1.Insert2.Delete…

原创文章生成器在线版-ai写作生成器

随着人工智能技术的迅猛发展,越来越多的人开始意识到,利用AI可以实现许多以前不可能想象的事情。其中,一种最能体现人工智能技术优势的应用就是“ai原创文章生成器”。它可以为营销从业者提供一种全新的营销推广方式。 那么,什么是…

AIGC技术赋能下 CRM将迎来怎样的变革?

今年以来,随着ChatGPT的爆火,人工智能(AI)迎来新一轮的热潮,开始更多地走入人们的视野。如果说2016年“阿尔法狗”(Alpha Go)大战围棋世界冠军还只是人工智能的“昙花一现”,那么Cha…

在 FPGA 上如何实现双线性插值的计算?

作者 | 殷庆瑜 责编 | 胡巍巍 目录 一、概述 二、What?什么是双线性插值? 二、Why?为什么需要双线性插值? 三、How?怎么实现双线性插值? 关键点1 像素点选择 关键点2 权重计算 升级1 通过查表减少…

深入分析Linux网络丢包

1、背景: 从图中你可以看出,可能发生丢包的位置,实际上贯穿了整个网络协议栈。换句话说,全程都有丢包的可能。 在两台 VM 连接之间,可能会发生传输失败的错误,比如网络拥塞、线路错误等;在网卡…

大数据实战 --- 淘宝用户行为

目录 开发环境 数据描述 功能需求 数据准备 数据清洗 用户行为分析 找出有价值的用户 开发环境 HadoopHiveSparkHBase 启动Hadoop:start-all.sh 启动zookeeper:zkServer.sh start 启动Hive: nohup hiveserver2 1>/dev/null 2>…

计算机体系结构基本概念,指令系统

Amdahl定律 这个定律告诉我们去优化系统中最重要(占比最大)的部分,作业有个问题,是系统中有多个部件可以改进,可改进部分比例的分母是整个任务,并不是独属于部件 i i i的任务,因此扩展的Amdahl定…

kubespray 部署 kubernetes 排错细节仅供参考

文章目录 1. TASK [kubernetes/preinstall : Hosts | create list from inventory]2: TASK [container-engine/containerd : containerd Create registry directories]3. TASK [kubernetes/control-plane : kubeadm | Initialize first master]4. reslov.conf 权限无法修改5. i…

LeetCode算法小抄 -- 环检测算法 和 拓扑排序算法

LeetCode算法小抄 -- 环检测算法 和 拓扑排序算法 环检测算法(DFS)[207. 课程表](https://leetcode.cn/problems/course-schedule/) 拓扑排序算法(DFS)[210. 课程表 II](https://leetcode.cn/problems/course-schedule-ii/) 环检测算法(BFS)拓扑排序算法(BFS) ⚠申明&#xff1…

第四章-图像加密与解密

加密与加密原理 使用异或运算实现图像加密及解密功能。 异或运算规则(相同为0,不同为1) 运算数相同,结果为0;运算数不同,结果为1任何数(0/1)与0异或,结果仍为自身任何数(0/1)与1异或,结果为另外一个数,即0变1, 1变0任何数和自身异或,结果为0 同理到图像加密解密 加密过程:…

Stable Diffusion成为生产力工具(六):制作一张庆祝五一劳动节的海报

S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习: 安装webui《Windows安装Stable Diffusion WebUI及问题解决记录》。…

JS逆向 - 破解oklink加密参数及加密数据

版权声明:原创不易,本文禁止抄袭、转载,侵权必究! 目录 一、JS逆向目标-会当临绝顶二、JS逆向分析-不识庐山真面目三、JS逆向测试-只缘身在此山中四、JS反逆向-柳暗花明又一村五、oklink逆向完整代码下载六、作者Info 一、JS逆向目…

Redis --- 常用命令、Java中操作Redis

一、Redis常用命令 1.1、字符串string操作命令 Redis 中字符串类型常用命令: SET key value 设置指定key的值 GET key 获取指定key的值 SETEX key seconds value 设置指定key的值,并将 key 的过期时间设为 seconds 秒 SETNX key value 只有在 key 不…

Java入坑之抽象类、设计模式与接口

目录 一、抽象类 1.1定义 1.2特点 1.3使用场景 1.4抽象方法 1.5抽象类的实现 1.6开-闭原则 1.7匿名类 二、设计模式(了解) 2.1定义 2.2分类 2.3模板设计模式 2.4单例模式 三、接口 3.1定义 3.2语法格式 3.3接口实现 3.4接口类型变量 …

cyberdefenders------------Insider

cyberdefenders------------Insider 防守更聪明,而不是更难 0x01 前言 ​ CyberDefenders 是一个蓝队培训平台,专注于网络安全的防御方面,以学习、验证和提升网络防御技能。使用cyberdefenders的题目来学习恶意流量取证,题目来…

GBDT算法原理及实战

1.什么是GBDT算法 GBDT(Gradient Boosting Decision Tree),全名叫梯度提升决策树,是一种迭代的决策树算法,又叫 MART(Multiple Additive Regression Tree),它通过构造一组弱的学习器(树),并把多棵决策树的结果累加起来…