vue3项目搭建

一:介绍

        Vue3 是从2018年开始研发,经过大概一年半的不断重构与试运行,最终发布于2020年9月18日。相比于 Vue2 其具有更小,更快,支持性更高等功能。因此学号 Vue3 是非常有必要的,同时 Vue2 也将会与2023年12月31日起正式停止维护。

1、性能上比 vue2 快乐1.2~2倍

  • 在 Vue3 中,优化了 diff 算法,增加了静态标记PatchFlag。
  • render阶段有静态提升,对于不参与更新的 vnode ,只会被创建一次。
  • 事件缓存监听,减少创建组件实例的开销。

2、按需编译,体积比 vue2 更小。

        在vue3中,可以如下面这样引用vue的功能函数,如果你的项目没有用到watch,那编译时就会把tree shaking掉。

import { computed, watch, nextTick } from "vue";

利用的就是 ES6 模块系统import/export。

3、对 TS 采取了默认支持

        由于 vue2 是 Option API 风格。而 options 是个简单对象,ts 却是一种类型系统、面向对象的语法。因此 vue2 不适用TS。

        在vue3中,量身打造了defineComponent函数,使组件在ts下,更好的利用参数类型推断 。Composition API 代码风格中,比较有代表性的api就是 ref 和 reactive,也很好的支持了类型声明。

4、其余优点

  • 使用 Vite 做开发构建工具,不仅项目的启动更快,同时开始时热重载也快。
  • 使用Proxy进行数据监听,消除了Object.defineProperty现有的限制
  • 根节点可以有多个等

        当然 Vue3 的不仅仅是这些,还有很多优点是 Vue2 所不具备的。因此在未来很长一段时间,Vue3 将会逐渐替换 Vue2 开发,因此掌握3是必备的,同时也要掌握 2=>3 过度的方法。

二:搭建Vue3项目

1、开发环境的安装

  • (1)打开node官网:https://nodejs.org/zh-cn/
  • 下载node并安装(安装vue3建议node在10.0版本以上)。
  • 在终端中输入node -v可显示node版本
  • (2)安装vue-cli脚手架
  • 如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载
  • 然后重新安装:npm install @vue/cli -g

        当然,为了方便管理node版本,建议各位小伙伴去安装一个nvm,这样使用别人项目的时候可以减少很多莫名其妙的bug,这里是我电脑所安装的两个版本的node。

2、项目搭建的两种方式

1)使用vite搭建

在你想要创建项目的地方使用shift+鼠标右键,点击“在此处打开PowerShell窗口”

npm init vite@latest

        使用 npm init vite@latest 初始化,如果提示要输入 y 那么输入 y 就会自动安装 vite 了。然后会看到以下界面,提示你输入项目名字。这里我项目名字是Vue3_test。

        开发选择 Vue 按回车,现在 Vue 已经默认是3.0版本了。所以直接选择安装,就是3.0。

        这里我们选择TypeScript,在 vue3 开发中,使用这个开发会更可靠。

        出现该界面,则表示安装成功,我们可以依次使用他说提示的这三行代码,来启动项目

  cd Vue3_test
  npm install
  npm run dev

2)使用npm init vue@latest

        使用npm init vue@latest搭建vue3项目其实和第一种方式差不多,只是少了安装vite这一步。因此不再进行分布选择,下面这个是选择后的最终结果。

        在这里我们可以看到,其安装的内容更加详细,相比于使用vite进行安装。该命令是专门安装vue项目所使用的。可以根据我们的需求专门去进行配置。比如当你想要去做TDD开发的时候我们就可以选择安装Cypress等

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA前端开发介绍

以一个网站为例包括网站设计、前端开发、程序开发等。网站设计就是网站的外观,平面的东西。程序开发也好理解就是功能实现。而前端开发,简单来说,就是把平面效果图转换成网页,把静态转换成动态。它的工作包括了:切图、写样式、做鼠…

Java根据一个List内Object的两个字段去重

背景 在Java开发过程中,我们经常会遇到需要对List进行去重的需求。 其中常见的情况是,将数组去重,或者将对象依据某个字段去重。这两种方式均可用set属性进行处理。 今天讨论,有一个List,且其中的元素是自定义的对象&…

【JVM】JDBC案例打破双亲委派机制

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 JVM 打破双亲委派机制(JDBC案例…

RK3568平台开发系列讲解(音视频篇)RTMP 推流

🚀返回专栏总目录 文章目录 一、RTMP 的工作原理二、RTMP 流媒体服务框架2.1、Nginx 流媒体服务器2.2、FFmpeg 推流沉淀、分享、成长,让自己和他人都能有所收获!😄 📢目前常见的视频监控和视频直播都是使用了 RTMP、RTSP、HLS、MPEG-DASH、 WebRTC流媒体传输协议等。 R…

Halcon WPF 开发学习笔记(1):Hello World小程序

文章目录 文章专栏视频链接Hello World训练图片训练目的 开始训练图像预处理导入图像三通道处理调用算子通道选取 滤波什么是好的滤波 增加对比度 区域选取阈值处理算子参数选择运行结果(红色为选择区域) 区域分割运行结果 特征筛选参数代码第二次,面积筛选 画选中十…

【每日一题】统计范围内的元音字符串数

文章目录 Tag题目来源题目解读解题思路方法一:遍历 其他语言python3 写在最后 Tag 【遍历】【数组】【2023-11-07】 题目来源 2586. 统计范围内的元音字符串数 题目解读 统计范围内的元音字符串数。 解题思路 方法一:遍历 遍历下标在 [left, right]…

APM建设踩了哪些坑?去哪儿旅行分布式链路追踪系统实践

一分钟精华速览 分布式链路追踪系统在企业的APM体系中扮演着重要的角色。本文分享了去哪儿旅行构建分布式链路追踪系统的实践经验。从APM整体架构设计入手,讲述了日志收集、Kafka传输和Flink任务处理等环节的性能优化实践和踩坑经验。 同时,作者结合丰…

JVM-垃圾回收

目录 1、GC过程 2、垃圾回收算法 2.1、标记-清除 2.2、标记-整理 2.3、复制 2.4、分代收集算法 3、TLAB 4、对象如何进入老年代 5、卡片标记 6、HotSpot垃圾回收器 6.1、年轻代垃圾回收器 6.2、老年代垃圾回收器 6.3、如何配置垃圾回收器 6.4、STW 7、CMS垃圾回收…

【漏洞复现】Apache_Tomcat7+ 弱口令 后台getshell漏洞

感谢互联网提供分享知识与智慧,在法治的社会里,请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 说明内容漏洞编号漏洞名称Tomcat7 弱口令 && 后台getshell漏洞漏洞评级高…

SpringBoot整合EasyExcel

springboot整合easyExcel的全流程&#xff0c;跟着做就能出来。对项目没有侵入要求。0侵入&#xff0c;可插拔 依赖 <!--操作Excel依赖--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>…

linux下实现电脑开机后软件自启动

实现linux的软件自启动&#xff0c;需要四个文件 第一个【displayScreen.desktop】文件&#xff0c;.desktop文件就是一个用来运行程序的快捷方式,也叫启动器&#xff0c;常用来自启动用的文件&#xff0c;内容如下 [Desktop Entry] #要执行的脚本位置 Exec/home/yicaobao/te…

offsetof宏的使用、模拟实现及 (size_t)(((struct_type*)0)->mem_name)的解释

宏原型&#xff1a;offsetof(type,member) 作用&#xff1a;返回数据结构或联合体类型中成员的偏移量&#xff0c;以字节为单位 返回值&#xff1a;size_t类型的无符号整数 使用案例&#xff1a; #include <stdio.h> #include <stddef.h> struct foo {ch…

Unity热更新那些事

目录 热更新方案Unity程序的两种编译方式编译阶段执行阶段Mono方式IL2CPP方式两种方式打包以后的项目目录结构 其他 ILRuntime热更新ILRuntime使用注意ILRuntime的实现原理ILRuntime的性能优化建议ILRuntime的性能优化建议 HybridCLR热更新 参考链接 Unity热更新那些事 一小时极…

pda条码二维码扫描数据采集安卓手持终端扫码热敏标签打印一体机

HT800新一代移动物联终端是深圳联强优创信息科技有限公司自主研发的基于Android11操作系统的高性能、高可靠的工业级手持数据终端&#xff0c;能与其它设备进行无线通讯&#xff0c;提供良好的操作界面&#xff0c;支持条码扫描、RFID读写&#xff08;NFC&#xff09;、GPS定位…

Android 扩大View可点击区域范围

有时候会遇到这种需求&#xff1a;本身控件显示在很小的范围内&#xff0c;但是要求扩大可点击的区域。根据官方文档https://developer.android.com/develop/ui/views/touch-and-input/gestures/viewgroup?hlzh-cn#delegate可以得知通过 TouchDelegate 类&#xff0c;让父视图…

【复盘】记录一次JVM 异常问题 java.lang.OutOfMemoryError: unable to create new native thread

背景是最新运营提了一个需求&#xff0c;需要根据用户信息拉去三分机构的信贷数据&#xff0c;需要达到一天百万级别&#xff0c;但是经过实际测试&#xff0c;也只能达到40W量级&#xff0c;具体就是通过起多个Spring Boot项目&#xff0c;每个项目1S拉一个用户&#xff0c;基…

使用 Rust 进行程序

首先&#xff0c;我们需要安装必要的库。在终端中运行以下命令来安装 scraper 和 reqwest 库&#xff1a; rust cargo install scraper reqwest 然后&#xff0c;我们可以开始编写程序。以下是一个基本的爬虫程序&#xff0c;用于爬取 上的图片&#xff1a; rust use reqwe…

接口自动化测试分层设计与实践总结01

本文以笔者当前使用的自动化测试项目为例&#xff0c;浅谈分层设计的思路&#xff0c;不涉及到具体的代码细节和某个框架的实现原理&#xff0c;重点关注在分层前后的使用对比&#xff0c;可能会以一些伪代码为例来说明举例。 接口测试三要素&#xff1a; 参数构造 发起请求&…

C#,数值计算——偏微分方程,Relaxation的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class Relaxation { private Relaxation() { } public static void sor(double[,] a, double[,] b, double[,] c, double[,] d, double[,] e, double[,] f, double[,] u, double rjac) …

Python基础(第五期): python数据容器(序列) 列表 集合 元素 字符串 字典 序列遍历操作

python基础专栏 python基础&#xff08;第五期&#xff09; 文章目录 python基础&#xff08;第五期&#xff09;数据容器一、列表1、列表的定义2、列表的下标索引 3、列表的(添加)方法3.1 列表的查询方法3.2 修改特定下标索引的值3.3 列表指定位置插入元素3.3 列表指定元素的追…