vue 请教为什么不能正常显示组件？

main.ts
```typescript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
.component('blog-post', {
props: ['title'],
template: `<h4>{{ title }}</h4>`
})
.mount('#app'

```

index.html


<div id="app">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>

建议看文档

vue 不是全局变量，html 中不知道什么是 blog-post

App.vue 的内容是什么？你是用 App.vue 作为根节点创建了 vue 实例，然后挂载到#app 上，#app 原有的内容会被替换掉。你的模版不要写在#app 里应该写在 App.vue 里。

如果是第一次接触 Vue 建议不要一开始就使用脚手架。在 vite 脚手架中，如果 LZ 想要 blog-post 组件正常显示，那么#app 中的内容应该写在 App.vue 的 template 标签内。

如果一定要在 vite 项目中这样写能够生效，你需要在创建 createApp 时不把 App 传进去，因为它在构建工具之后会有 render 函数，会覆盖掉#app 的内容，可以传一个空对象进去，然后在 vite.config.ts 中创建一个一个 vue 的别名，为：vue/dist/vue.esm-bundler.js ，接着就可以继续使用 DOM 组件了

初始化的新项目不是带个 helloworld 的组件吗，你看看它怎么用的被，照着焯一个就行了