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

Posted 2023-02-23

【中文标题】你如何将 Vue.js 包（如 vodal）集成到 Laravel 中？

【英文标题】：How do you integrate a Vue.js package (like vodal) into Laravel?

【发布时间】：2019-09-30 02:01:19

【问题描述】：

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

【参考方案1】：

在 laravel 中，首先打开终端并使用命令 npm install 安装 npm，然后您可以在项目中看到一个名为 node_modules 的新文件夹。你所有的包代码都在这个文件夹里。

现在只需对 vodal 运行您的命令，例如 npm i -S vodal

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

在开发模式下运行 npm run watch，这会将所有 vodal 代码从 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 来显示模态的主要部分。默认情况下是假的，所以它不会显示给你。 我正在为节目制作一个点击事件，所以你了解它是如何工作的。并用评论中的链接分享文件。

【讨论】：

我确实做到了，但它不起作用。 vodal 包在独立模式下工作......问题是，你如何让这样的包在 Laravel 中工作？

它适用于 laravel。你跑了npm run dev 还是npm run watch

我仍然无法让它工作。顺便说一句，我确实在laracasts.com/series/learn-vue-2-step-by-step 观看了“与组件相关”的视频，这是我尝试过的 2 次提交的公共回购：gitlab.com/connecteev/laravel_vodal_test 我在终端 1 中运行了这个：npm i -S vodal npm install npm run watch 我在终端 2 中运行了这个： php artisan serve 然后打开浏览器去127.0.0.1:8000 不走运。我看到的只是prnt.sc/npion4 我错过了什么？

我看到了你的存储库旁遮普语。正如我告诉你的那样导入它，但在顶部导入它

我下载了您的存储库并编辑了一些文件，一切正常。请参阅我对此的更新答案