当前位置： 首页 > news >正文

Vue3代码初体验找不同

news 文章来源：https://blog.csdn.net/JHXL_/article/details/128790237 2024/11/3 0:18:41

文章目录

  • 🌟 写在前面
  • 🌟 代码分析
  • 🌟 写在最后

🌟 写在前面

专栏介绍：
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！

温故知新：
上一篇文章中我们通过Vite构建了Vue3的项目工程，并且感受了一下Vite的强悍的构建编译速度，但是大家可能对其内部的代码结构有点迷惑，尤其是我们的入口文件main.js中的写法有所不同，今天这篇文章呢我们就来盘点一下入口文件代码的区别之处吧！

🌟 代码分析

专属插件
由于Vue2和Vue3版本的组建代码并不一样，所以我们常用的VSCode语法提示和代码高亮的插件也需要更换，vuter是Vue2专用的，而Vue3也有专用的volar，如果我们没有安装volar打开app.vue文件会报错，所以需要我们首先安装 volar 并且禁用 vuter；

在这里插入图片描述

template 中可以包含多个根元素
安装插件后我们打开 app.vue 文件就不会有报错了，但是我们能够在 template 模板中发现一个很大的区别，在之前 Vue2 的项目中我们的 template 模板中只能有一个根元素，但是在我们刚刚初始化的代码中 template 中有两个根元素；

<template><div> <a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template>

入口文件 main.js

我们打开 main.js 后发现里面的写法跟 Vue2 的差距还是比较大的，回顾一下我们 Vue 的入口文件中具体都在做什么，它的基础写法：

1）创建一个app组件作为跟组件
2）将app组件导入到main.js中
3）导入Vue构造函数
4）初始化Vue实例
5）将Vue挂载到 id 为app的容器中

//Vue2
import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App),
}).$mount('#app')//------------------------------------------------------////Vue3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

注意：引入的组件的时候不可以省略后缀名，并且不能使用@，脚手架目前不支持，会报错

在这里插入图片描述

我们可以尝试一下修改app.vue中的内容感受一下 Vite 的编译速度，上面我们看了 main.js，那其实在index.html中也有一点点的不同，我们来看一下 index.html 中的全部代码 👇 ，发现在我们的 index.html 中引入main.js的script标签多了 type="module" ，那这个是什么意思呢？其实他是配合Vite来使用的，上篇文章中为大家介绍了 我们的Vite是以原生 ESM 方式提供源码，其实说白了就是通过在script标签加上 type="module" 让我们能够导入 main.js 中ES6的语法；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

🌟 写在最后

我们初步体验了一下代码结构以及工程入口文件的不同，各位小伙伴们掌握了吗？下篇文章中我们将正式的进入代码学习阶段，为大家讲解我们的 Vue3 亮点——组合式API的用法；

✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！\textcolor{green}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！\textcolor{green}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！

相关文章：

Vue3代码初体验找不同

文章目录&#x1f31f; 写在前面&#x1f31f; 代码分析&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相关技术文章&#xff0c;Vue 框架目前的地位大家应该都晓…...

编程日记 2023/5/14 9:11:12

opencv调取摄像头录制

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…...

编程日记 2023/5/15 14:21:51

html标签手册

完整的HTML页面&#x1f4d1; ①基础标签&#x1f4d1;&#x1f4d1;&#x1f4d1; HTML <!DOCTYPE> 声明 !DOCTYPE声明必须是 HTML 文档的第一行&#xff0c;位于 html标签之前。 !DOCTYPE 声明不是 HTML 标签&#xff1b;它是指示 web 浏览器关于页面使用哪个 HTML 版…...

编程日记 2023/5/12 12:06:54

SpringMVC--视图、RESTful案例、处理AJAX请求

SpringMVC的视图 SpringMVC中的视图是View接口&#xff0c;视图的作用渲染数据&#xff0c;将模型Model中的数据展示给用户 SpringMVC视图的种类很多&#xff0c;默认有转发视图和重定向视图 当工程引入jstl的依赖&#xff0c;转发视图会自动转换为JstlView 若使用的视图技术为…...

编程日记 2023/5/24 3:38:49

一个同学升了leader，今年活还没干，他就已经想好组里成员的两次绩效考核怎么打了，还说：leader都是这样的！...

绩效是大家都比较关注的事情&#xff0c;那么作为领导&#xff0c;一般是怎么打绩效的呢&#xff1f;一位网友爆料&#xff1a;一个大学同学升了leader&#xff0c;前段时间跟他吃饭&#xff0c;他说他已经想好了今年组里成员的两次绩效考核怎么打了。该网友有点吃惊&#xff0…...

编程日记 2023/4/15 4:26:42

Docker 面试知识点

Docker 是什么&#xff1f; 是实现容器技术的一种工具是一个开源的应用容器引擎使用 C/S 架构模式&#xff0c;通过远程API 来管理 (我们本机是 C&#xff0c;docker 引擎是 S,实际的构建过程是在 docker 引擎下完成的)可以打包一个应用及依赖包到一个轻量级、可移植的容器中 …...

编程日记 2023/5/30 13:02:11

C++高级篇学习笔记

文章目录 前言 本文记录C一些面试难点问题剖析。 1. 左右值和右值引用的作用 左值&#xff1a;可以在左边&#xff0c;表达式结束后依然存在的持久对象&#xff0c;一般有名字&#xff0c;可以取地址。 提示&#xff1a; 前置自加/自减 可以做左值&#xff1b; 右值在右边&a…...

编程日记 2023/5/30 13:07:28

gentoo基本安装过程

该文章是本人在gentoo官方安装文档的基础上简单总结的&#xff0c;也是本人自己实践过的&#xff0c;目前本人用的就是gentoo&#xff0c;对于真的需要安装gentoo的朋友&#xff0c;建议还是参考官方文档&#xff0c;说的比较详细&#xff0c;这个可以简单看看&#xff0c;可以…...

编程日记 2023/5/12 12:52:25

【LeetCode】1234. 替换子串得到平衡字符串

1234. 替换子串得到平衡字符串 题目描述 有一个只含有 ‘Q’, ‘W’, ‘E’, ‘R’ 四种字符&#xff0c;且长度为 n 的字符串。 假如在该字符串中&#xff0c;这四个字符都恰好出现 n/4 次&#xff0c;那么它就是一个「平衡字符串」。 给你一个这样的字符串 s&#xff0c;…...

编程日记 2023/4/11 20:13:22

[动手写操作系统]-01-开机运行系统

文章目录 **概念和目标**概念目标理论源码概念和目标 概念 assembler: 汇编程序BIOS: BIOS（Basic Input Output System，基本输入输出系统）是个可编程的微型操作系统，用于管理计算机中的软硬件，它控制着系统的启动，系统是如何连接外部设备，怎样响应，调整相应操作，都是…...

编程日记 2023/5/25 7:46:28

最长回文子序列问题

最长回文子序列问题 问题描述&#xff1a;给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 注意是子序列而不是子…...

编程日记 2023/5/30 13:11:30

月薪11k！从财务专员到软件测试工程师，成都校区小哥哥用三个月实现转行换岗

好久没和大家分享学员的转行经历了&#xff0c;或许在一些人看来他们的故事与自己无关&#xff0c;但同样也能引起一些人的共鸣&#xff0c;可以帮助到那些陷于就业焦虑的同学找到目标和方向。相仿的年龄、相同的职业、相似的压力…在转行软件测试追求更好生活的路上&#xff0…...

编程日记 2023/4/19 14:00:51

Android 逆向工具大整理，碉堡了

文章目录jadx打开 gui 界面把安装包打开双击变量名和方法名可以高亮所有出现的地方**强大的搜索功能****搜索资源****查看 APK 签名****查看 APK dex 数&#xff0c;方法数****查看资源&#xff0c;配置清单****展开包名**查找方式引用反混淆导出 Gradle 工程导出反编译资源lib…...

编程日记 2023/5/12 13:14:03

二维数组的定义

1. 概念二维数组就是一种数组的数组&#xff0c;其本质上还是一个一维数组&#xff0c;只是它的数据元素又是一个一维数组。如果你对这个概念想象不出来&#xff0c;给大家举个栗子&#xff0c;相信吸烟的同学一下子就会明白。一根烟 一个变量一包烟 20根烟 一维数组一条烟 …...

编程日记 2023/5/25 17:55:37

SpringMVC--获取请求参数、域对象共享数据

SpringMVC获取请求参数 通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参&#xff0c;此时HttpServletRequest类型的参数表示封装了当前请 求的请求报文的对象 RequestMapping("/testParam") public String testParam(HttpServletRequest request){S…...

编程日记 2023/5/15 22:58:41

2月13日,30秒知全网,精选7个热点

///深圳支持数字经济核心区试点&#xff0c;市民每月免费享有1T网络流量支持基础电信企业、广电企业及互联网企业加快推进全市内容分发网络&#xff08;CDN&#xff09;扩容及智能改造行动&#xff0c;优化和完善CDN节点部署&#xff0c;积极利用边缘计算技术&#xff0c;推动互…...

编程日记 2023/5/25 17:57:47

【C++设计模式】学习笔记（2）：模式分类与模版方法 Template Method

目录 简介模式分类GOF-23 模式分类从封装变化角度对模式分类重构获得模式 Refactoring to Patterns重构关键技法“组件协作”模式Template Method 模式动机（Motivation）结构化软件设计流程面向对象软件设计流程早绑定与晚绑定模式的定义结构（Structure）要点总结结语简介 He…...

编程日记 2023/5/25 8:01:25

【Swift 60秒】92 - Nil coalescing

0x00 Lesson The nil coalescing operator unwraps an optional and returns the value inside if there is one. If there isn’t a value - if the optional was nil - then a default value is used instead. Either way, the result won’t be optional: it will either b…...

编程日记 2023/5/13 5:33:23

python pip安装的包的路径

以ubuntu为例从一个店家那里拿到的一个ubuntu环境中&#xff0c;同时安装了python3.6和python2.7&#xff0c;又安装了ros&#xff0c;最后pip安装包的位置很混乱&#xff0c;安装的包不知道安装在了哪里。使用vscode的时候需要代码提示&#xff0c;就得找到包的路径&#xff0…...

编程日记 2023/5/12 13:52:58

个人收藏学习

【默认收藏夹】 CompletableFuture使用详解&#xff08;全网看这一篇就行&#xff09; 从头开始学MySQL-------存储过程与存储函数&#xff08;4&#xff09; 聊聊支付流程的设计与实现逻辑 聊聊消息中心的设计与实现逻辑 SpringBoot2 整合JTA组件&#xff0c;多数据源事务管理…...

编程日记 2023/5/25 8:13:53

【C++】类和对象---需掌握的功能

目录1.初始化列表1.1构造函数赋值1.2初始化列表格式&#xff1a;编译器执行的顺序&#xff1a;特性&#xff1a;1.3explicit关键字类型替换过程多参数构造函数类型替换&#xff08;C11&#xff09;2.static成员编程题3.匿名对象4.友元4.1友元函数4.2友元类5.内部类6.拷贝对象时…...

编程日记 2023/5/25 18:01:27

2.12、进程互斥的软件实现方法

学习提示: 理解各个算法的思想、原理结合上小节学习的 “实现互斥的四个逻辑部分”&#xff0c;重点理解各算法在进入区、退出区都做了什么分析各算法存在的缺陷&#xff08;结合 “实现互斥要遵循的四个原则” 进行分析&#xff09; 1、单标志法 算法思想&#xff1a;两个进…...

编程日记 2023/2/13 12:34:14

Java面试题-数据库

数据库相关 MySQL的索引使用 默认会有主键索引。 索引分类&#xff1a;单值索引、复合索引、唯一索引 详细文章 MySQL explain 分析 MySQL通过explain关键字分析SQL的执行计划。&#xff08;Oracle通过EXPLAIN PLAN FOR sql&#xff09; IDSELECT_TYPETABLEPARTITIONSTYPEPOSS…...

编程日记 2023/5/12 14:44:03

select 与 where、group by、order by、limit 子句执行优先级比较

当 select 和 其他三种语句的一者或者多者同时出现时&#xff0c;他们之间是存在执行先后顺序的。 他们的优先级顺序是&#xff1a;where > group by > select > order by > limit 目录 1、select 与 where 2、group by 与 where 、select 2、select 与 order…...

编程日记 2023/5/13 5:40:40

【Docker】用开源umami监控你的站点访问量

新年到&#xff0c;祝大家兔年吉祥&#xff01;&#x1f389; 1.介绍 umami是一个开源的站点访问量监看程序&#xff0c;其支持docker部署到自己的服务器上。相比较百度等收费的网站信息监看&#xff0c;这种方式对于小站长来说更加实惠一些 2.docker安装的坑 2.1 docker-co…...

编程日记 2023/5/16 7:48:31

java环境配置

java环境配置步骤下载jdk安装jdk配置环境变量通过控制台命令验证配置是否成功大功告成安装教程&#xff1a; https://blog.csdn.net/m0_37220730/article/details/103585266 下载jdk 若不理解JDK/JRE/JVM的关系&#xff0c;可以点此查看初识Java&#xff08;概念、版本迭代、…...

编程日记 2023/5/12 14:56:24

Linux系统服务：Apache安装及配置应用

目录 一、Apache安装 1、Apache简介 2、Yum安装 3、编译安装 4、服务管理 5、编译安装实现systemctl服务管理 二、Apache配置应用 1、基础应用 2、隐藏版本号 3、更改监听端口 一、Apache安装 1、Apache简介 Apache即阿帕奇是一款开源的、世界使用排名第一的Web服务…...

编程日记 2023/4/11 5:04:01

动态规划(Dynamic Programming)——背包问题

动态规划(Dynamic Programming) 背包问题 目录动态规划(Dynamic Programming)背包问题01背包问题输入格式输出格式数据范围输入样例输出样例&#xff1a;二维一维完全背包问题多重背包问题输入格式输出格式数据范围输入样例输出样例&#xff1a;数据范围二进制优化分组背包问题…...

编程日记 2023/5/16 8:06:23

JVM学习02：内存结构

JVM学习02&#xff1a;内存结构 1. 程序计数器 1.1、定义 Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 作用&#xff1a;是记住下一条jvm指令的执行地址 特点&#xff1a; 是线程私有的不会存在内存溢出 1.2、作用 程序计数器物理上是由寄存器来实…...

编程日记 2023/4/17 23:27:00

6年软件测试经验，从我自己的角度理解自动化测试

接触了不少同行&#xff0c;由于他们之前一直做手工测试&#xff0c;现在很迫切希望做自动化测试&#xff0c;其中不乏工作5年以上的人。 本人从事软件自动化测试已经近6年&#xff0c;从server端到web端&#xff0c;从API到mobile&#xff0c;切身体会到自动化带来的好处与痛楚…...

编程日记 2023/4/9 15:00:05

网站开发项目交接/同城推广引流平台

搞惯导、组合导航领域的专家严恭敏老师&#xff0c;在新浪博客上有一系列专业文章。这里记录下博客地址&#xff1a; http://blog.sina.com.cn/s/articlelist_1089338825_0_1.html...

编程日记 2024/11/2 22:37:43

石家庄市建设局质监站网站/网络站点推广的方法有哪些

前言 在SpringBoot中使用自定义注解、aop切面打印web请求日志。主要是想把controller的每个request请求日志收集起来&#xff0c;调用接口、执行时间、返回值这几个重要的信息存储到数据库里&#xff0c;然后可以使用火焰图统计接口调用时长&#xff0c;平均响应时长&am…...

编程日记 2024/11/2 22:06:46

做网站有什么用出/全媒体广告投放平台

第一步&#xff1a;建立数据库(这部分已经在《关于oracle中自增字段问题总结》一文中写过。点此查看第二步&#xff1a;创建一个查询过程&#xff0c;因为在登录时要根据用户名查询用户密码此步要用到pl/sql编程知识&#xff0c;代码如下&#xff1a;create or replace procedu…...

编程日记 2024/11/2 21:52:35

好多网站没排名了/个人网页制作

linux目录的大小4k怎么来的&#xff1f;发布时间:2010-08-05 13:54:37来源:红联作者:xfox如下命令&#xff1a;lufenglufeng-desktop:~$ ls -lh /总用量 93Kdrwxr-xr-x 2 root root 4.0K 2010-08-03 13:18 bindrwxr-xr-x 4 root root 1.0K 2010-08-03 13:28 bootdrwxr-xr-x 2 r…...

编程日记 2024/11/2 21:27:37

越影网站建设/合肥seo外包平台

????????关注后回复 “进群” &#xff0c;拉你进程序员交流群????????来源丨新智元新智元报道 来源&#xff1a;Reddit编辑&#xff1a;Priscilla 好困【新智元导读】苹果计划推出在iOS 15中应用的CSAM检测系统备受争议。近日&#xff0c;一位Reddit用户发现…...

编程日记 2024/11/2 21:24:35

网站怎样做301/百度快照入口

前言很多童鞋没有系统的Unity3D游戏开发基础&#xff0c;也不知道从何开始学。为此我们精选了一套国外优秀的Unity3D游戏开发教程&#xff0c;翻译整理后放送给大家&#xff0c;教您从零开始一步一步掌握Unity3D游戏开发。 本文不是广告&#xff0c;不是推广&#xff0c;是免费…...

编程日记 2024/11/2 15:43:16