如何将Vue.js软件包（如vodal）集成到Laravel中？

Question

我有一个空的Laravel项目，并一直试图安装vodal（ https://github.com/chenjiahan/vodal ），没有运气。

我知道vue.js的基础知识，但我仍然是初学者，之前从未在我的Laravel应用程序中使用过Vue.js包。

注意：我能够下载https://github.com/chenjiahan/vodal并让它作为独立运行。 挑战在于将其集成到新的Laravel 5.8项目中。

运行后：

npm i -S vodal

这段代码在我的laravel应用程序中的位置？ 该怎么做：

1. app.js
2. 一个blade.php视图文件
3. 一个新的Vue组件
4. 任何其他位置？

我如何让这个Vodal（或者就此而言，任何vue.js）包与Laravel一起使用？ 我一直在苦苦挣扎几个小时，任何帮助都会受到赞赏。

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',

  data() {
    return {
      show: false
    }
  }
}
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

Answer 1

在laravel第一个打开终端并使用命令npm install之后，您可以在项目中看到名为node_modules的新文件夹。 您的所有包代码都在此文件夹中。

现在只需像npm i -S vodal一样运行你的vodal命令

现在您可以像以前一样将此包导入app.js文件中。

运行npm run watch以获取开发模式，该模式会将node_modules文件夹中的所有vodal代码导入到公共目录中的app.js文件中。

更新

我看到了你的存储库，我下载了它并编辑了你的一些文件。 你做错了。 我建议你先学习vuejs而不是深入研究它。

问题是你在vue调用它，而不是在vue组件中，所以为什么你给出以下代码。

export default {
    components: {
        Vodal
    },
    data() {
        return {
            show: false
        }
    }
}

我们在vue组件中执行此操作，而不是在vue中。 在数据中，我们仅返回vue组件和vodal的官方文档，它们还给出了在vue组件中使用它的示例。

并且您没有在vue组件中使用它，所以只需在下面的vue中执行此操作

const app = new Vue({
    el: '#app',
    data:{
        show: false
    }
});

所以现在你的CSS 。

所以包括css。 我只是在app.scss文件中导入它，如下所示。

@import "~vodal/common.css";
@import "~vodal/rotate.css";

现在最后一部分和你最大的错误是。 为什么不在welcome.blade文件中包含app.js文件。 您的所有代码都是用app.js文件编写的，而不是包含它。 所以我只需将它包含在welcome.blade文件中，如下所示

<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

毕竟，只需运行npm run watch

所以现在你需要show:true的主要部分show:true对于show modal来说是show:true 。 默认为false，因此它不会显示给您。 我正在为节目制作一个点击事件，所以你了解它是如何工作的。 和病毒共享文件与评论中的链接。