index.html

​ 浏览器加载index.html

<!-- 浏览器看到的是： -->
<body>
    <div id="app"></div>  <!-- 空的，没有内容 -->
    <script type="module" src="/src/main.ts"></script>
</body>
  1. 解析 HTML：遇到 <div id="app">，创建空的 DOM 元素
  2. 注册元素：在 DOM 树中记录这个 div，设置 id="app"
  3. 样式计算：计算 CSS（如果有样式的话），但现在是空的
  4. 布局和绘制：绘制一个空矩形（0高度或默认高度）
  5. 继续解析：继续解析后面的 <script> 标签

进入到Vue的世界

  1. 解析main.ts，这一步开发环境和打包后是不同的。打包后就没有ts文件了，全部变成js文件。
  2. 在main.ts中，vue的语法，创建一个组件。再将这个组件绑定到id为app的div。
  3. App.vue的内容加载到界面
    中。