Vue应用初始化的正确方式是什么？不同写法的最佳实践说明

三种写法的差异原因 #

你看到的不同初始化写法核心是Vue大版本迭代和使用场景不同导致的，不存在写法对错，仅适用场景有区别：

• 选项1：这是Vue 2的根实例初始化写法。Vue 2的全局API基于new Vue()构造函数实现，创建根实例时可以直接传el参数指定挂载节点，也可以后续调用$mount('#app')完成挂载。如果你的项目依赖是Vue 3，使用该写法会直接报错。
• 选项2：这是Vue单文件组件（SFC）的默认导出格式，不管是Vue 2还是Vue 3的选项式API单文件组件，都用这个格式导出组件配置。它不是应用初始化代码，只是单个组件的定义逻辑，写在.vue文件的script标签内即可，不需要手动处理挂载，脚手架构建工具会自动完成组件的注册和渲染。
• 选项3：这是Vue 3的根应用初始化写法。Vue 3废弃了Vue 2的全局构造函数模式，改用createApp方法创建根实例，避免全局污染。你用npm构建时报Vue不存在的错误，是因为官方文档的示例默认假设你通过CDN引入Vue（此时全局存在Vue变量），npm场景下需要先手动导入对应的API：

// 新增导入语句
import { createApp } from 'vue'
// 直接调用createApp，不需要加Vue.前缀
const app = createApp({})
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  }
})
app.mount('#components-demo')

对应场景的最佳实践 #

针对你用npm构建项目的场景，按版本区分最佳实践：

• Vue 2项目：根实例初始化用new Vue()写法，业务组件统一用单文件组件export default导出选项式配置，全局公共组件可以在根实例创建前通过Vue.component注册。
• Vue 3项目：根应用初始化统一用createApp方法，全局组件、插件都挂载到创建出的app实例上，不要尝试调用全局Vue变量。业务组件优先用单文件组件，使用组合式API时推荐<script setup>语法糖，不需要写export default的冗余代码。

额外注意两个常见新手误区：

1. 不要混淆组件定义代码和应用初始化代码，单文件组件的导出仅为组件配置，应用启动代码统一放在项目入口的main.js/main.ts文件中即可。
2. 所有通过npm安装的依赖，使用前都需要先导入，不能直接使用CDN场景下的全局变量，该规则对所有第三方库生效。

内容的提问来源于stack exchange，提问作者user4759415