本文最后更新于 283 天前，如有失效请评论区留言。
前言
为什么我们运行 npm run dev 就能启动一个前端项目了？
启动的过程发生了什么?本文会简单介绍几个入口文件
入口文件
每一个 vue 项目在根目录下都有一个 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
这里有一个 id="app"的容器，一般叫做挂载点，只有挂载点里的内容才是 vue 应用，之外添加的 html 元素是不归 vue 管理的，也就是说一个页面，你可以选择只让其中一部分应用 vue 的特性
然后在 src 目录下有 main.js 和 App.vue
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')App.vue
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>可以这样理解，main.js 就是用来将组件 mount 挂载到 index.html 的挂载点里，这里可以挂载多个应用实例，像这样
createApp(App).mount('#app')
createApp(App).mount('#app2')App.vue 相当于所有 vue 组件的根组件，能不能把App.vue 放到根目录下呢？显然也是可以的，不过为了构建一个清晰的目录结构，一般各个组件都会有自己的位置，按照官方的样板区创建也能减少不必要的问题。
启动过程
我们先通过打印来看看这里面是什么
console.log(App)
const app = createApp(App)
console.log(app)
app.mount('#app')在 vue 的包中可以看到 package.json 的大致内容如下，unpkg 的文件为 runtime-dom.global.js 这个就是 vue 的全局文件了，一万多行代码，所有的源码都在这里了。
而 module 为 dist/runtime-dom.esm-bundler.js，也就是说项目里使用的是这个 runtime-dom.esm-bundler.js 的文件，这里是功能实现通过分模块导入实现的
{
"name": "@vue/runtime-dom",
"version": "3.4.4",
"description": "@vue/runtime-dom",
"main": "index.js",
"module": "dist/runtime-dom.esm-bundler.js",
"types": "dist/runtime-dom.d.ts",
"unpkg": "dist/runtime-dom.global.js",
..................
}项目的源码部分这里不做说明，感兴趣的可以去看看，咱不是专业搞前端的，大概知道怎么回事就行，主打一个不求甚解。
网上有写的比较好的文章推荐你们看下， https://juejin.cn/post/7188566053293654075