V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GhostBoy
V2EX  ›  Vue.js

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

  •  
  •   GhostBoy · 2021-12-17 11:16:18 +08:00 · 1808 次点击
    这是一个创建于 1054 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2021-12-17 14:31:21 +08:00
    GhostBoy
        1
    GhostBoy  
    OP
       2021-12-17 11:16:56 +08:00
    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
        2
    GhostBoy  
    OP
       2021-12-17 11:19:25 +08:00
    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
        3
    yuningWang8  
       2021-12-17 11:54:11 +08:00
    建议看文档
    KouShuiYu
        4
    KouShuiYu  
       2021-12-17 11:55:35 +08:00
    vue 不是全局变量,html 中不知道什么是 blog-post
    shintendo
        5
    shintendo  
       2021-12-17 12:04:10 +08:00
    App.vue 的内容是什么?你是用 App.vue 作为根节点创建了 vue 实例,然后挂载到#app 上,#app 原有的内容会被替换掉。你的模版不要写在#app 里应该写在 App.vue 里。
    Curtion
        6
    Curtion  
       2021-12-17 14:01:33 +08:00
    如果是第一次接触 Vue 建议不要一开始就使用脚手架。在 vite 脚手架中,如果 LZ 想要 blog-post 组件正常显示,那么#app 中的内容应该写在 App.vue 的 template 标签内。
    Curtion
        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 组件了
    liubaicai
        8
    liubaicai  
       2021-12-17 14:31:21 +08:00
    初始化的新项目不是带个 helloworld 的组件吗,你看看它怎么用的被,照着焯一个就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3387 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:36 · PVG 19:36 · LAX 03:36 · JFK 06:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.