用的 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 的组件吗,你看看它怎么用的被,照着焯一个就行了
|