如何在 Laravel 项目中导入和使用 vue-good-table Vue 组件
Posted
技术标签:
【中文标题】如何在 Laravel 项目中导入和使用 vue-good-table Vue 组件【英文标题】：How to import and use vue-good-table Vue component in a Laravel project 【发布时间】：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，谢谢！
没问题，很高兴它有效；）
【参考方案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,
更多信息https://github.com/xaksis/vue-good-table
【讨论】：
以上是关于如何在 Laravel 项目中导入和使用 vue-good-table Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章
如何在ionic 4项目中导入和使用自定义cordova插件
VueJS 和 SASS - 在脚本中导入和使用 SASS 变量