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.创建一个文件夹,选择在终端打开

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

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

vue create v1

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

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

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

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

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

 5.选择3的版本回车

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

 6.选择y,然后回车键

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

 7.选择第一个回车

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

 8.选择第一个回车

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

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

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

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

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

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

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

访问成功 

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

方式二:使用vite创建

vite是新一代前端构建工具

优势:

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

轻量快速热重载

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

操作步骤

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

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

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

npm init vite-app v2

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

3.选择y回车

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

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

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

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

npm run dev

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

6. 访问成功

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

来源:https://blog.csdn.net/m0_52861000/article/details/130181571

标签:vue3,cli,vite,创建方式
0
投稿

猜你喜欢

  • Python中的二叉树查找算法模块使用指南

    2022-02-23 00:51:06
  • node.js微信公众平台开发教程

    2024-05-03 15:56:19
  • python超详细实现完整学生成绩管理系统

    2022-08-25 08:59:08
  • 如何在ADSI中查询用户属性?

    2010-06-17 12:53:00
  • 仿windows选项卡效果拾零

    2013-07-13 09:33:42
  • Python3使用requests登录人人影视网站的方法

    2021-10-04 15:42:19
  • Flask框架通过Flask_login实现用户登录功能示例

    2021-07-19 07:15:38
  • python @property的用法及含义全面解析

    2023-04-06 00:42:28
  • python中必要的名词解释

    2023-10-17 23:30:32
  • JavaScript中诡异的delete操作符

    2024-04-10 16:15:33
  • 教你给《羊了个羊》配置一套智能客服系统

    2022-01-25 21:33:36
  • Python定义函数时参数有默认值问题解决

    2023-02-10 21:58:49
  • ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'

    2024-01-15 21:45:27
  • Mysql存储过程中游标的用法实例

    2024-01-22 14:59:10
  • Python Dataframe 指定多列去重、求差集的方法

    2022-01-12 00:40:19
  • python实现图片横向和纵向拼接

    2021-12-20 20:53:30
  • 从理论角度讨论JavaScript闭包

    2024-03-29 06:46:46
  • ASP批量生成静态页面的写法(批量生成技巧iframe)

    2011-02-24 11:01:00
  • python通过apply使用元祖和列表调用函数实例

    2021-02-18 03:18:32
  • 用Python解析XML的几种常见方法的介绍

    2023-12-18 11:35:08
  • asp之家 网络编程 m.aspxhome.com