使用 Oruga 和 Vue3 时缺少模板或渲染功能答案

【问题标题】：Missing template or render function when using Oruga and Vue3使用 Oruga 和 Vue3 时缺少模板或渲染功能
【发布时间】：2021-11-05 06:10:17
【问题描述】：

我已经设置了 vue3 和 Oruga，但是在尝试渲染组件时遇到了一些困难。表格组件显示在路由器视图（视图/车辆）中

我有：

/view/Vehicles.

<template>
    <h1>Vehicles</h1>
    <o-table :data="vehicles" :columns="columns"></o-table>
</template>

<script>

import { Table } from '@oruga-ui/oruga-next'
import { API } from 'aws-amplify'
 import { listVehicles } from '../graphql/queries'

export default {
    name: "Vehicles",
    components: { 
        'o-table': Table  
        },
    data() {
        return {
            vehicles: [],
            columns: [
                          {
            field: 'id',
            label: 'ID',
            width: '40',
            numeric: true
          },
          {
            field: 'name',
            label: 'Name'
          },
          {
            field: 'description',
            label: 'Description'
          },
          {
            field: 'address',
            label: 'Address',
            position: 'centered'
          }
            ]
        }
    },
        methods: {
      /*
       * Load async data
       */
      async listVehicles() {
          console.log("Getting Vehicles...")
            const vehicles = await API.graphql({ query: listVehicles})
            this.vehicles = vehicles.data.listVehicles.items
      },
      /*
       * Handle page-change event
       */
      onPageChange(page) {
        this.page = page
        this.listVehicles()
      },
      /*
       * Handle sort event
       */
      onSort(field, order) {
        this.sortField = field
        this.sortOrder = order
        this.listVehicles()
      },
      /*
       * Type style in relation to the value
       */
      type(value) {
        const number = parseFloat(value)
        if (number < 6) {
          return 'is-danger'
        } else if (number >= 6 && number < 8) {
          return 'is-warning'
        } else if (number >= 8) {
          return 'is-success'
        }
      }
    },
    mounted() {
      this.listVehicles()
    }
}
</script>

<style>

</style>

main.js - 引导整个 oruga 库，如果我使用单个组件似乎没有什么区别......

import { createApp } from "vue";
import App from "./App.vue";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import Oruga from "@oruga-ui/oruga-next";
import "./index.css";

import {
  applyPolyfills,
  defineCustomElements,
} from "@aws-amplify/ui-components/loader";

import router from "./router";

applyPolyfills().then(() => {
  defineCustomElements(window);
});
Amplify.configure(awsconfig);

createApp(App).use(router).use(Oruga).mount("#app");

【问题讨论】：

标签： javascript vuejs3

【解决方案1】：

看起来是两件事，需要添加 async 到挂载，因为阻塞警告也来自 eslinter 设置为

"rules": {
      "vue/no-unused-components": "off"
    }

【讨论】：