Vue3启动应用的最小流程是先用createApp创建实例并传入根组件，再调用mount挂载到已存在的DOM容器；支持链式配置全局能力，mount返回根组件实例而非app本身。

Vue3 用 createApp 创建应用实例，再调用 mount 方法挂载到页面上，这是启动一个 Vue 应用的最小必要流程。

createApp 的基本写法

必须从 'vue' 中导入 createApp，并传入根组件（通常是一个 .vue 文件或配置对象）：

• 如果使用单文件组件：import App from './App.vue'，然后 createApp(App)
• 如果写内联组件：直接传入一个含 template 和 data 的对象，data 必须是函数且返回对象

挂载前要确保 DOM 容器存在

挂载目标（比如 <div id="app"></div>）需提前写在 index.html 里。否则 mount 会失败或报错。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 支持两种写法：app.mount('#app')（用 CSS 选择器）或 app.mount(document.getElementById('app'))（传 DOM 元素）
• 一个应用实例只能挂载一次，重复调用会警告，不会覆盖或重渲染

常见链式配置习惯

创建实例后、挂载前，可连续调用方法配置全局能力：

立即学习“前端免费学习笔记（深入）”；

• app.use(router) 注册 Vue Router
• app.component('MyButton', MyButton) 注册全局组件
• app.directive('focus', { mounted(el) { el.focus() } }) 注册自定义指令
• app.config.globalProperties.$http = axios 添加全局属性（类似 Vue2 的 prototype）

挂载后返回的是根组件实例

app.mount() 的返回值不是 app 本身，而是根组件的公开实例（ComponentPublicInstance），可用于调试或手动触发方法：

• 比如 const instance = app.mount('#app')，之后可访问 instance.$data 或调用 instance.someMethod()
• 若根组件没定义 template 或 render，Vue 会自动取挂载容器的 innerHTML 当模板（适合渐进增强场景）