如何在 Laravel 项目中导入和使用 vue-good-table Vue 组件答案

【问题标题】：How to import and use vue-good-table Vue component in a Laravel project如何在 Laravel 项目中导入和使用 vue-good-table Vue 组件
【发布时间】：2020-08-30 18:50:30
【问题描述】：

我正在尝试在 Laravel 项目中导入和使用一个名为 vue-good-table (https://xaksis.github.io/vue-good-table/guide/#installation) 的 Vue 组件，但我无法让它工作。如果我将它导入普通的 Vue 项目，它确实有效，但不适用于 Laravel。
我使用 npm 安装了该组件，并尝试按照描述多次导入它。你将如何导入它？（对我来说理想的是在全球范围内导入它）。

我必须在哪里以及如何导入组件？

我的基本文件如下：

app.js

require('./bootstrap'); 
window.Vue = require('vue'); 
const app = new Vue({
    el: '#app',
});

MyTable.vue

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  name: 'my-table',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM Do yy',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
      ],
    };
  },
};
</script>

vuegoodtable.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue comp test  </title>
    <script src="/js/app.js" defer></script>
</head>
<body>

    <div id="app">
        <my-table> </my-table>

    </div>

</body>
</html>

谢谢！

【问题讨论】：

"我遇到了某种错误" 那会是什么错误？ “你将如何导入它？”我会按照安装说明进行操作。在该安装页面中，将代码放在您的resources/js/app.js 中的“在应用中全局导入”下方 - 应该就是这样
例如，它给了我错误：未知的自定义元素： - 你是否正确注册了组件？我尝试按照说明进行操作
那么，您注册了自己的MyTable 组件吗？在app.js?喜欢 Laravel 自带的 ExampleComponent 吗？
好吧，它工作！抱歉，我刚开始使用 Vue，谢谢！
没问题，很高兴它有效；）

标签： javascript laravel vue.js import vue-component

【解决方案1】：

我不明白答案。对我来说也没有用，github里面的解释还不够！我正在尝试使用后端 python 制作整个 vuejs 文件。

我有一个 Table.vue 文件，内容如下：

<template>
<div>
    <vue-good-table
            :columns="columns"
            :rows="rows">
    </vue-good-table>
</div>
</template>

<script>
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';

export default {
    components: {
        VueGoodTable,
    },
    el: '#table',
    name: "Table.vue",
    data() {
       return {
            columns: [
                {
                    label: 'Duration',
                    field: 'duration',
                    type: 'number'
                },
                {
                    label: 'Guest ID',
                    field: 'guestID',
                },
            rows: [
                {
                    "duration": 1800,
                    "guestID": "zWxgMqVOqEXnTdFaCkZ9EK87q1Z2",
                },
                {
                    "duration": 1800,
                    "guestID": "zWxgMqVOqEXnTdFaCkZ9EK87q1Z2",
                }
                ],
        }
    }
}
</script>

<style scoped>

</style>

我仍然收到以下错误：

[vite] hot updated: /src/views/Table.vue
runtime-core.esm-bundler.js:6551 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <RouterView> 
  at <App>
runtime-dom.esm-bundler.js:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:35)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4273)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6668)
    at flushJobs (runtime-core.esm-bundler.js:6907)

【讨论】：

【解决方案2】：

您可以使用 npm 安装并轻松导入

使用 npm 安装：

npm install --save vue-good-table

在应用中全局导入：

import VueGoodTablePlugin from 'vue-good-table';

// 导入样式

import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

导入到您的组件中

import { VueGoodTable } from 'vue-good-table';

// 添加到组件中

components: {
  VueGoodTable,
}

使用 Typescript 导入您的组件

// 添加到组件组件：{

  'vue-good-table': require('vue-good-table').VueGoodTable,
}

【讨论】：