编写并分析Vue3.0的入口文件和根组件

nomi-糯米

于 2024-07-23 08:00:00 发布

阅读量1.2k

点赞数 26

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cute_neko/article/details/140622991

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue3+TypeScript系列笔记

4.编写并分析Vue3.0的入口文件和根组件

虽然在构建项目完成后，src中已经构建好了一个Vue介绍页面，可以直接运行项目通过浏览器查看页面效果

但是本篇文章还是将从零开始对项目的入口文件和根组件进行编写和详细分析，便于入门和理解

在vue3项目中，index.html文件是用来作为项目入口的HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

分析index.html中的代码：

在head标签中

声明了HTML文档的字符编码为UTF-8

指定了当前页面的网页图标和网页名称

在body标签中，实际上只有一个div标签和script标签

div标签的id为app，script标签引入的资源为/src/main.ts

这个id会连接到src/main.ts中的内容

所以，接下来我们去编写和分析main.ts中的内容

import { createApp } from "vue";
import App from './App.vue';
createApp(App).mount('#app');

分析index.html中的代码：

从vue的库中引入createApp用于创建应用
引入App根组件
调用createApp，然后使用mount将根组件App挂载到index.html的id中

因为main.ts中引入了App.vue根组件，所以现在去编写和分析App根组件

<template>
    <h1>Hello Vue3！</h1>
</template>

<script lang="ts">

</script>

<style scoped>

</style>

App.vue中的内容是一个标准的vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分

index.html所显示的内容实际上是从template中渲染的

在这里插入图片描述

在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html 中定义的正文部分。上面有一个 id 为 app 的挂载点，之后我们的 Vue 根实例就会挂载到该挂载点上

小结

index.html 是 Vue.js 单页面应用程序 (SPA) 的入口文件，它负责渲染应用程序的初始用户界面
index.html 定义了应用程序的 HTML 基础结构和配置，包括标题、图标等等
浏览器加载 index.html 时，它会加载main.ts(或main.js)中的Vue库和的TypeScript 或者 JavaScript 代码
main.ts(或main.js)会从vue库中引入createApp和App根组件并且调用createApp将根组件挂载到index.html中的id

往期文章：
Vue3项目创建及项目结构分析
 Vue3项目解决运行时无NetWork地址的问题

nomi-糯米

关注

26
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
编写并分析Vue3.0的入口文件和根组件

编写并分析Vue3.0的入口文件和根组件
复制链接

扫一扫

专栏目录