Vue3 源码：index.html、App.vue 与 main.js 入口解析

index.html

简化的 index.html 如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js" type="module"></script>
  </body>
</html>

其中 body 中的两段代码比较重要

• <div id="root"></div>：这个是用于挂载整个 vue 代码的根节点，在 main.js 中会执行挂载
• <script src="main.js" type="module"></script>

main.js

import { createApp } from 'vue';
import App from './App.js';

const rootContainer = document.querySelector('#root');
createApp(App).mount(rootContainer);

可以发现我们在 main.js 中引入了 createApp， 同时在 createApp 传入 App.vue 中导出的 App，最终通过调用 createApp 中的 mount 方法， 将 App.vue 文件进行一系列的处理挂载到 rootContainer 下面。

App.js / App.vue

一般情况下我们写 Vue 会有一个主入口文件比如 App.vue，为了简化模版转换的流程，我们用 js 代表这个文件，如下

export const App = {
  render() {
    return h('div', 'test---content');
  },
  setup() {
    return {
      msg: 'setup 中的信息',
    };
  },
};

可以发现我们最终将 App 进行导出，然后 createApp 传入并且去使用它。