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应用程序中的哪里？应该输入什么：

app.js
blade.php视图文件
新的Vue组件
其他位置？

如何使此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安装npm，之后您可以在项目中看到一个名为node_modules的新文件夹。您所有的软件包代码都在此文件夹中。

现在只需像npm i -S vodal

那样运行命令就可以了。

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

运行npm run watch进行开发，它将所有node_modules文件夹中的语音代码导入到您的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的主要部分来显示模态。默认情况下为false，因此不会向您显示。我正在为该节目制作一个Click事件，因此您了解它是如何工作的。并使用注释中的链接共享文件。

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

1 个答案: