这是一个创建于 1090 天前的主题，其中的信息可能已经有所发展或是发生改变。
用的 vite vue 初始化默认结构，在 main.ts 里定义且全局注册组件并默认 mount #app ，在 index.html 里引用组件，为什么不显示？
 |
1
GhostBoy OP 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' ``` |
|
2
GhostBoy OP 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> |
 |
3
yuningWang8 2021-12-17 11:54:11 +08:00
建议看文档
|
 |
4
KouShuiYu 2021-12-17 11:55:35 +08:00
vue 不是全局变量，html 中不知道什么是 blog-post
|
 |
5
shintendo 2021-12-17 12:04:10 +08:00
App.vue 的内容是什么？你是用 App.vue 作为根节点创建了 vue 实例，然后挂载到#app 上，#app 原有的内容会被替换掉。你的模版不要写在#app 里应该写在 App.vue 里。
|
 |
6
Curtion 2021-12-17 14:01:33 +08:00
如果是第一次接触 Vue 建议不要一开始就使用脚手架。在 vite 脚手架中，如果 LZ 想要 blog-post 组件正常显示，那么#app 中的内容应该写在 App.vue 的 template 标签内。
|
|
7
Curtion 2021-12-17 14:23:39 +08:00
如果一定要在 vite 项目中这样写能够生效，你需要在创建 createApp 时不把 App 传进去，因为它在构建工具之后会有 render 函数，会覆盖掉#app 的内容，可以传一个空对象进去，然后在 vite.config.ts 中创建一个一个 vue 的别名，为：vue/dist/vue.esm-bundler.js ，接着就可以继续使用 DOM 组件了
|
 |
8
liubaicai 2021-12-17 14:31:21 +08:00
初始化的新项目不是带个 helloworld 的组件吗，你看看它怎么用的被，照着焯一个就行了
|
Select Language