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

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

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

我的基本文件如下：

应用.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>

谢谢！

我不明白答案。对我来说也不起作用，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)

您可以使用 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,
}

使用打字稿导入到组件中

添加到组件组件：{

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

欲了解更多信息 https://github.com/xaksis/vue-good-table

相关内容

最新更新

热门标签：