vue3的介绍和两种创建方式详解(cli和vite)
作者:云边的快乐猫 发布时间:2023-07-02 16:51:31
一、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. 访问成功
来源:https://blog.csdn.net/m0_52861000/article/details/130181571
猜你喜欢
- python链表的反转反转链表给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。输入:head = [1,2,3,4,5]输
- 无意中看到百度的页面代码,想到了一种声明写法,需要的朋友可以参考下。<!DOCTYPE html> <!--[if IE]
- 记录日志是我们程序中必不可少的一个功能,但是日志文件如果没有合理的管理,时间长了几百兆的日志文件就很难分析了(都不想打开看),但是又不可能经
- 背景由于 python 自带的源下载速度非常慢,特别是安装一些库的时候,甚至有时会失败。pip国内的一些镜像 阿里云 http:
- 本文实例讲述了Python实现清理微信僵尸粉功能。分享给大家供大家参考,具体如下:原理通过Pyhton调用itchat模块登录网页版微信,给
- 模板引擎说明:模板文件就是按照一定的规则书写的展示效果的HTML文件 模板引擎就是负责按照指定规则进行替换的工具模板引擎选择jinja2一、
- 需要将字符串中的空格去掉的情况,可以使用下面几种解决方法:1、strip()方法:该方法只能把字符串头和尾的空格去掉,但是不能将字符串中间的
- torch.Tensor类型的数据loss和acc打印时如果写成以下写法print('batch_loss: '+str(l
- 元组:# 元组,一种不可变的序列,在创建之后不能做任何的修改# 1.不可变# 2.用()创建元组类型,数据项用逗号来分割# 3.可以是任何的
- 说在前面和word的文本相比PDF更类似于一张张图片,图上放着一个个文字。对其的解析是将图片上的文字提取到text文件中,方便之后的分析。添
- 理解一个算法最快,最深刻的做法,我觉着可能是自己手动实现,虽然项目中不用自己实现,有已经封装好的算法库,供我们调用,我觉着还是有必要自己亲自
- 最近看到好多人说到tns或者数据库不能登录等问题,就索性总结了下面的文档。首先来说Oracle的网络结构,往复杂处说能加上加密、LDAP等等
- 本文首先举例阐述了两种排序方法的操作步骤,然后列出了用python进行的实现过程,最后对桶式排序方法的优劣进行了简单总结。一、桶排序:排序一
- 本文实例讲述了Python实现判断并移除列表指定位置元素的方法。分享给大家供大家参考,具体如下:问题很简单,输入一个列表和索引,若索引超出列
- 1.writelines()直接写入l=["A","B","C","D
- 本文实例讲述了Python统计分析模块statistics用法。分享给大家供大家参考,具体如下:一 计算平均数函数mean()>>
- 错误如图所示:图一 如果不能很好地执行登录触发器,那么将会导致登录失败。 例如,如果创建了这个触发器,那么就可以设计下面的代码来达到失败的目
- 笔者电脑系统是win7,同时安装了Python2.7和Python3.6,但是在通过命令行直接使用“pip install XXX”安装Py
- 如何下载最新版本的MySQL?我先去MySQL首页下载最新版本的MySQL-链接:https://www.mysql.com/downloa
- 神经网络一般用GPU来跑,我们的神经网络框架一般也都安装的GPU版本,本文就简单记录一下GPU使用的编写。GPU的设置不在model,而是在