西安网站建设盈科,国外什么推广网站好,专业的网站建设价格,哈尔滨做网站收费文章目录#x1f31f; 写在前面#x1f31f; 代码分析#x1f31f; 写在最后#x1f31f; 写在前面
专栏介绍#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章#xff0c;应粉丝要求开始更新 Vue3 的相关技术文章#xff0c;Vue 框架目前的地位大家应该都晓…
文章目录 写在前面 代码分析 写在最后写在前面
专栏介绍 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章应粉丝要求开始更新 Vue3 的相关技术文章Vue 框架目前的地位大家应该都晓得所谓三大框架使用人数最多公司选型最多的框架凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因和 Vue 框架相比其他框架的巨大优势有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的随着 Vue 框架不断的被认可现如今的 Vue 框架已经是前端工程师必备的技能了记得尤大大开发 Vue 的初衷为了让自己的开发工作更加便捷也希望这个框架能让更多人的开发工作变得轻松现如今 Vue 框架做到了尤大大做到了当然在 20 年的 9 月 18 日Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布如今已经过去了两年多的时间更多的公司选择了Vue3技术所以凉哥也在这个时候为大家出这份专栏本专栏将帮助大家掌握Vue3TS技术提升自己竞争力
温故知新 上一篇文章中我们通过Vite构建了Vue3的项目工程并且感受了一下Vite的强悍的构建编译速度但是大家可能对其内部的代码结构有点迷惑尤其是我们的入口文件main.js中的写法有所不同今天这篇文章呢我们就来盘点一下入口文件代码的区别之处吧 代码分析 专属插件 由于Vue2和Vue3版本的组建代码并不一样所以我们常用的VSCode语法提示和代码高亮的插件也需要更换vuter是Vue2专用的而Vue3也有专用的volar如果我们没有安装volar打开app.vue文件会报错所以需要我们首先安装 volar 并且禁用 vuter template 中可以包含多个根元素 安装插件后我们打开 app.vue 文件就不会有报错了但是我们能够在 template 模板中发现一个很大的区别在之前 Vue2 的项目中我们的 template 模板中只能有一个根元素但是在我们刚刚初始化的代码中 template 中有两个根元素
templatediv a hrefhttps://vitejs.dev target_blankimg src/vite.svg classlogo altVite logo //aa hrefhttps://vuejs.org/ target_blankimg src./assets/vue.svg classlogo vue altVue logo //a/divHelloWorld msgVite 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标签多了 typemodule 那这个是什么意思呢其实他是配合Vite来使用的上篇文章中为大家介绍了 我们的Vite是以原生 ESM 方式提供源码其实说白了就是通过在script标签加上 typemodule 让我们能够导入 main.js 中ES6的语法
!DOCTYPE html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/html 写在最后
我们初步体验了一下代码结构以及工程入口文件的不同各位小伙伴们掌握了吗下篇文章中我们将正式的进入代码学习阶段为大家讲解我们的 Vue3 亮点——组合式API的用法 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{green}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{green}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{green}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
