您如何将Vue.js包(如vodal)集成到Laravel中?

时间:2019-05-13 06:24:56

标签: laravel vue.js laravel-5 vuejs2 vue-component

我有一个空的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";

1 个答案:

答案 0 :(得分:0)

在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事件,因此您了解它是如何工作的。并使用注释中的链接共享文件。