Vue 3 通过 createApp 初始化应用实例并挂载根组件，核心步骤为导入函数、传入根组件、调用 mount；支持传 props、挂载前配置全局能力及多实例共存。
Vue 3 使用 createApp 初始化应用实例并挂载根组件，核心就三步：导入函数、传入根组件、调用 mount。整个过程清晰隔离，支持多实例共存，且所有配置必须在挂载前完成。
基础写法：从单文件组件开始
这是最常见也最推荐的方式，适用于标准 Vue 项目结构：
- 在
main.js（或main.ts）中，从'vue'导入createApp - 导入根组件（通常是
App.vue的默认导出） - 调用
createApp(App)创建应用实例 - 用
.mount('#app')挂载到 HTML 中 id 为app的容器上
示例代码：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
支持向根组件传 props
如果根组件声明了 props，可以在 createApp 的第二个参数中直接传入初始值：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 确保根组件的
props选项已正确定义（如props: ['title', 'theme']） - 传入的对象键名需与 props 名称一致，值会被当作初始化 props 注入
- 该行为仅影响根组件，子组件不受影响
例如：
const app = createApp(App, {
title: '后台管理系统',
theme: 'dark'
})
app.mount('#app')
挂载前可配置全局能力
应用实例提供多个方法，用于注册跨组件可用的资源，但必须在 .mount() 之前调用：
-
app.component('MyButton', MyButton)：注册全局组件，模板中可直接使用<MyButton></MyButton> -
app.directive('focus', { mounted(el) { el.focus() } })：注册自定义指令 -
app.use(router)或app.use(pinia)：安装插件 -
app.provide('apiBase', 'https://api.example.com')：设置依赖注入，后代组件可用inject('apiBase')获取
多实例共存场景
Vue 3 允许同一页面运行多个独立 Vue 应用，彼此配置互不干扰：
- 每个
createApp()调用生成一个全新实例 - 各自调用
.mount()到不同 DOM 容器（如#app1、#app2） - 全局组件、插件、指令等均作用于对应实例，不会交叉污染
示例：
import { createApp } from 'vue'
import Dashboard from './Dashboard.vue'
import Widget from './Widget.vue'
createApp(Dashboard).mount('#dashboard')
createApp(Widget).mount('#widget')
