我有一个空的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应用程序中的哪里?应该输入什么:
如何使此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";
答案 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事件,因此您了解它是如何工作的。并使用注释中的链接共享文件。