如何在 Laravel 5.4 中加载 Vue 组件?

2024-05-17

我已经运行 npm run watch 并收到了消息

This dependency was not found:

*  in ./resources/assets/js/app.js

To install it, you can run: npm install --save 

所以我运行了 npm install --save 但仍然收到相同的消息。

根据我的理解,我需要 npm run 或 npm run watch 来加载 Laravel 中的 Vue 文件。

例如,在“resources/assets/js/components/Example.vue”文件中,我对其进行了编辑,但是当我加载“resources/views/welcome.blade.php”文件(如下所示)时,更新来自Example.vue 文件无法加载。

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @if (Auth::check())
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ url('/login') }}">Login</a>
                        <a href="{{ url('/register') }}">Register</a>
                    @endif
                </div>
            @endif

              <div id="app">
                <example></example>
              </div>

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>


        <script src='js/app.js'></script>
    </body>
</html>

(我只在脚本 src 链接和 div 中添加了“app”id 和“example”组件)

我必须做什么才能加载对 Example.vue 文件所做的更改?之后,我还需要在 Laravel 的 Vue.js 中为我的应用程序创建新组件。


你需要运行:

npm install

then :

npm run dev 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Laravel 5.4 中加载 Vue 组件? 的相关文章

随机推荐

  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • 调试内存不足异常

    在修复我制作的小型 ASP NET C Web 应用程序的错误时 我遇到了 OutOfMemoryException 没有关于在哪里查看的提示 因为这是一个编译时错误 如何诊断此异常 我假设这正是内存分析发挥作用的地方 有小费吗 Thank
  • 使用 RunAs 启动 chrome 时出现“Chrome 旧版窗口”

    我正在尝试使用 MSAA 在 Win7 上 获取 chrome 浏览器中的地址栏并将其替换为不同的 url 当 chrome 正常启动时 作为登录用户 我可以通过遍历进程拥有的窗口类的 UI 树 使用 IAccessible 接口找到地址栏
  • 由枚举驱动的 SwiftUI 选择器:值未更新

    根据苹果公司的相关文档SwiftUI 中使用 Enum 的选取器 https developer apple com documentation swiftui picker 如果枚举符合Identifiable协议除了CaseIterab
  • 串行 I/O 与 Windows/Windows CE 重叠/不重叠

    抱歉 这不是一个大问题 但更多的是帮助那些在这些特定问题上遇到问题的人 我正在解决的问题需要使用串行 I O 但主要在 Windows CE 6 0 下运行 然而 最近有人问我该应用程序是否也可以在 Windows 下运行 所以我开始着手解
  • Android:打开和关闭SQLite数据库

    我正在开发Android应用程序 我经常在其中访问本地数据库 该数据库可以从不同的主题访问 因此我遇到了数据库的协调问题 我使用以下open and close method public void open mDb mDbHelper g
  • 如何使用 Core Graphics 在我的触摸位置绘制一个圆圈?

    新程序员来了 我在尝试使用 Core Graphics 在触摸位置周围绘制描边弧时遇到问题 我有绘制圆圈的方法工作正常 并且我已经测试并在点击屏幕时注册触摸 但是当我尝试在点击时调用绘制圆圈的方法时 我收到错误 CG ContextBlah
  • 为什么 Web Worker 性能在 30 秒后急剧下降?

    我正在尝试提高在网络工作人员中执行时脚本的性能 它旨在解析浏览器中的大型文本文件而不会崩溃 一切都运行得很好 但我注意到使用网络工作者时大文件的性能存在严重差异 于是我做了一个简单的实验 我在同一输入上运行脚本两次 第一次运行在页面的主线程
  • Werkzeug 中的线程和本地代理。用法

    首先 我想确保我正确理解了功能的分配 分配本地代理功能以通过线程内的模块 包 共享变量 对象 我对吗 其次 用法对我来说仍然不清楚 也许是因为我误解了作业 我用烧瓶 如果我有两个 或更多 模块 A B 我想将对象C从模块A导入到模块B 但我
  • 计算 mysql 数据库行数的最佳方法

    在遇到 mysql 查询加载时间慢的问题后 我现在正在寻找计算行数的最佳方法 我曾经愚蠢地使用过mysql num rows 函数来做到这一点 现在意识到这是最糟糕的方法 我实际上正在制作一个分页来用 PHP 制作页面 我找到了几种计算行数
  • ZLIB 解压缩

    我编写了一个小型应用程序 该应用程序应该解压缩以 gzip deflate 格式编码的数据 为了实现这一点 我使用 ZLIB 库 使用解压缩功能 问题是这个功能不起作用 换句话说 数据不是未压缩的 我在这里发布代码 int decompre
  • 内部存储的安全性如何?

    我需要的 对于 Android 我需要永久保存数据 但也能够编辑 并且显然是读取 它 用户不应访问此数据 它可以包含诸如高分之类的内容 用户不得对其进行编辑 我的问题 我会 并且已经 使用过Internal Storage 但我不确定它实际
  • 可以获取位置,但无法获取航向

    我目前只使用模拟器 但我在 iOS 模拟器上快速使用 CoreLocation 时遇到问题 我得到此代码打印的位置更新 但从未得到标题 我不想当然 我正在尝试制作一个指南针类型的应用程序 它将显示目标的方位 class CompassVie
  • 如何自动启动我的 ec2 实例、运行命令然后将其关闭?

    我想每周对 redshift postgres 数据库中的数据运行一次机器学习模型 我使用以下命令将 R 脚本设置为休息 apiplumbr然后我将其设置为一项任务来管理pm2 我有它 所以任务会在ec2实例启动然后继续运行 要让 R 脚本
  • 来自控制器的 Rails 验证

    有一个联系页面 可以输入姓名 电话 电子邮件和消息 然后发送到管理员的电子邮件 没有理由将消息存储在数据库中 问题 如何 在控制器中使用 Rails 验证 根本不使用模型 或者 在模型中使用验证 但没有任何数据库关系 UPD Model c
  • theta 连接、等值连接和自然连接之间的区别

    当涉及到 theta 连接 等值连接和自然连接时 我无法理解关系代数 有人可以帮助我更好地理解它吗 如果我在 theta 连接上使用 符号 它与使用自然连接完全相同吗 A 西塔加入允许任意比较关系 例如 An equijoin是使用相等运算
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 通过AWS appsync向graphql服务器代理请求

    我的一个 EC2 实例上运行着一台 graphql 服务器 我还运行了 AWS appsync 但目前它仅与几个 lambda 集成 我想将我的 Appsync 与 graphql 服务器连接 因此 Appsync 将充当特定查询 突变的代
  • 获取从属性构造函数内部应用到哪个属性的成员?

    我有一个自定义属性 在自定义属性的构造函数内 我想将属性的属性值设置为属性所应用到的属性的类型 是否有某种方式可以访问该属性所应用到的成员从我的属性类内部 可以从 NET 4 5 using CallerMemberName Somethi
  • 如何在 Laravel 5.4 中加载 Vue 组件?

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins