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

Question

我有一个空的 Laravel 项目并且一直在尝试安装 vodal (https://github.com/chenjiahan/vodal) 进入它，没有运气。

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

Note: I was able to download https://github.com/chenjiahan/vodal and get it running as a standalone. The challenge is getting it integrated into a new Laravel 5.8 project.

运行之后：

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的新文件夹。你所有的包代码都在这个文件夹里。

现在只需运行你的vodal命令，比如npm i -S vodal

现在您可以简单地将此包导入您的 app.js 文件。

运行 npm run watch 用于开发模式，它将所有 vodal 代码从 node_modules 文件夹导入到 app.js 文件中，该文件位于 public 目录中。

更新

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

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

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

我们在 vue 组件中执行此操作，而不是在 vue 中执行此操作。在数据方面，我们return只在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 所以它不会显示给你。我正在为节目制作一个点击事件，所以您了解它是如何工作的。并在评论中与 link 共享文件。

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

How do you integrate a Vue.js package (like vodal) into Laravel?

laravel

vue.js

laravel-5

vue-component

vuejs2