Vue3代码初体验找不同

Posted 2023-03-03 几何心凉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3代码初体验找不同相关的知识，希望对你有一定的参考价值。

文章目录

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

🌟 写在前面

专栏介绍：
凉哥作为 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的用法；

本期推荐

✨ $\\textcolorblue原创不易，还希望各位大佬支持一下$

👍 $\\textcolorgreen点赞，你的认可是我创作的动力！$

⭐️ $\\textcolorgreen收藏，你的青睐是我努力的方向！$

✏️ $\\textcolorgreen评论，你的意见是我进步的财富！$

以上是关于Vue3代码初体验找不同的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js初体验

MVC + Vue.js 初体验(实现表单操作)

vue.js代码初体验附理解v-bind图片加载

vue3.0 Composition API 上手初体验构建基本项目开发环境

vue3.0 Composition API 上手初体验构建 vue 基础代码