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

[GhostBoy]

用的 vite vue 初始化默认结构，在 main.ts 里定义且全局注册组件并默认 mount #app ，在 index.html 里引用组件，为什么不显示？

[GhostBoy]

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'

```

[GhostBoy]

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>

[yuningWang8]

建议看文档

[KouShuiYu]

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

[shintendo]

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

[Curtion]

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

[Curtion]

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

[liubaicai]

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