可以省略 App.vue，但 Vue 的 createApp() 必须接收一个根组件。可以直接把 RouterView 作为根组件：

// src/main.ts
import { createApp, h } from 'vue'
import { RouterView } from 'vue-router'
import router from '@/router'
import '@/assets/css/global.css'

const Root = {
  render: () => h(RouterView),
}

createApp(Root)
  .use(router)
  .mount('#app')

甚至可以简化为：

import { createApp } from 'vue'
import { RouterView } from 'vue-router'
import router from '@/router'
import '@/assets/css/global.css'

createApp(RouterView)
  .use(router)
  .mount('#app')

不过保留 App.vue 通常便于放置全局结构，例如：

<template>
  <GlobalTitleBar />
  <RouterView />
  <GlobalDialog />
</template>

如果项目没有全局布局，直接用 RouterView 作为根组件完全没问题。React 其实也有根组件，只是经常直接在入口中写成：

root.render(<RouterProvider router={router} />)

Vue 对应的思路就是：

createApp(RouterView).use(router).mount('#app')

如果有需要根组件，怎么办
这种全局 Provider 需要包住 RouterView。不使用 App.vue 时，可以在 main.ts 里直接创建根组件：

import { createApp, h } from 'vue'
import { RouterView } from 'vue-router'
import { NMessageProvider } from 'naive-ui'

import router from '@/router'
import '@/assets/css/global.css'

const Root = {
  render() {
    return h(
      NMessageProvider,
      null,
      {
        default: () => h(RouterView),
      },
    )
  },
}

createApp(Root)
  .use(router)
  .mount('#app')

等价的 Vue 模板是：

<n-message-provider>
  <RouterView />
</n-message-provider>

<content /> 不是 Vue Router 的路由出口；应使用 <RouterView />。

如果还有多个 Naive UI Provider，可以继续嵌套，但这时保留一个 App.vue 会更清晰：

<script setup lang="ts">
import {
  NConfigProvider,
  NDialogProvider,
  NMessageProvider,
  NNotificationProvider,
} from 'naive-ui'
</script>

<template>
  <NConfigProvider>
    <NDialogProvider>
      <NNotificationProvider>
        <NMessageProvider>
          <RouterView />
        </NMessageProvider>
      </NNotificationProvider>
    </NDialogProvider>
  </NConfigProvider>
</template>

所以只有一个 Provider 时可直接写在 main.ts；Provider 较多时，App.vue 更适合作为全局 Provider 容器。