Vuejs 3 和 laravel：组件缺少模板或渲染功能答案

【问题标题】：Vuejs 3 and laravel : Component is missing template or render functionVuejs 3 和 laravel：组件缺少模板或渲染功能
【发布时间】：2021-11-15 11:50:42
【问题描述】：

每次我尝试将 vuejs3 与 laravel 一起使用时都会发生此错误

Vue warn]: Component is missing template or render function. 
  at <App>

我用 vuejs 3 开始了一个新的 laravel 项目 8 和同样的问题，我不知道如何处理它。这是我的一些配置文件。

app.ts


require('./bootstrap');


import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

const app = createApp({
    components: {
        Welcome,
    },
}).mount("#app");

webpack.mix.js

const mix = require('laravel-mix');



 mix.ts("resources/js/app.ts", "public/js").vue({ version: 3 })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Welcome.vue

<template>
    <div id="app">
  Hello {{ name }} welcome to my app.
  <hr />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  
  setup() {
    const name = ref<string>("Bijaya");
    return {
      name,
    };
  },
});
</script>

package.json 版本

    "devDependencies": {
        "@vue/compiler-sfc": "^3.2.13",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "ts-loader": "^9.2.6",
        "typescript": "^4.4.3"
    },
    "dependencies": {
        "vue": "^3.2.13",
        "vue-loader": "^16.6.0"
    }

如果你有任何线索，请告诉我，谢谢

【问题讨论】：

为什么要导入两次welcome。
我确实尝试了其他方式来导入我的组件，我正在编辑帖子。

标签： javascript laravel typescript vuejs3 laravel-mix

【解决方案1】：

我真的不明白为什么，但在 app.ts 中改变了这个

import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";

const app = createApp({
    components: {
        Welcome,
    },
}).mount("#app");

到这里：

import { createApp } from "vue";
import qrcode from './components/qrcode.vue'
createApp(qrcode).mount("#app")

完成任务

【讨论】：