Question

我试图在Laravel项目中导入并使用称为vue-good-table（https://xaksis.github.io/vue-good-table/guide/#installation）的Vue组件，但无法正常工作。如果我将其导入到普通的Vue项目中，它确实可以工作，但是不能与Laravel一起使用。
我使用npm安装了该组件，并多次尝试将其导入。您将如何导入？（对我来说，理想的做法是将其导入全球）。

我必须在哪里导入组件？

我的基本文件如下：

app.js

import static org.apache.commons.text.StringEscapeUtils.escapeHtml4;

public void testHtmlEscapers(){
    String badInput = "<script> alert me! <script>";
    System.out.println(escapeHtml4(badInput));
}

MyTable.vue

public void testReplace(){
    String email = "some-email@domail.com";
    String masked = email.replaceAll("(?<=.).(?=[^@]*?.@)", "*");
    System.out.println(masked);
}

vuegoodtable.blade.php

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

谢谢！

Answer 1

您可以使用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组件

1 个答案: