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