logo标签列表

如何在Laravel项目中添加jQuery

laravel
41

我刚接触 Laravel 框架。 我想在使用 Laravel 框架构建的 Web 应用程序中使用 jQuery。

但是不知道如何在 Laravel 项目中链接到 jQuery 库。

2
只需在您的 Blade 模板头部手动添加 jQuery 链接，或者您可以使用 Elixer/Gulp。不过我认为您需要观看 https://laracasts.com/series/laravel-5-fundamentals ，它将更好地指导您在 Laravel 旅程中前行。 - codegenin
谢谢，我仍在观看这些视频，虽然我对它们的理解还很浅。 - Misterk
当我开始学习编程的时候也是一样的。秘诀在于永不放弃学习，只需根据自己的需要重复观看视频：-)祝你好运。 - codegenin
5个回答
31

你可以使用在线图书馆

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
或者下载库并将css文件放入css文件夹，将jquery文件放入js文件夹。两个文件夹都应该放在Laravel公共文件夹中，然后你可以像下面这样链接它们：
<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

否则

{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}
在页面中我有一个 <script src="{{asset('js/jquery.min.js')}}"></script> ，并且我在public文件夹的js文件夹中也有 jquery.min.js。但是我仍然出现了错误：无法加载资源：服务器响应404（未找到）(16:17:19:682 | error, network) 在public/js/jquery-1.11.3.js 中 Uncaught ReferenceError: $ is not defined (16:17:19:690 | error, javascript) at (anonymous function) (http://localhost:8000/jquery/index:7:9) 与浏览器的调试会话已关闭。 - Misterk
尝试使用在线库，然后会发生什么？ - Vision Coderz
最好使用在线库而不是从资源文件夹加载。 - Vision Coderz
你也可以查看这个问题：http://stackoverflow.com/questions/29614890/failed-to-load-resource-the-server-responded-with-a-status-of-404-not-found - Vision Coderz
有时候我也会遇到错误，所以我使用在线库。 - Vision Coderz
这个解决方案可行，但是有没有一种使用npm添加jquery的方法呢？ - Amit
23
要将jquery添加到laravel中，您首先需要将脚手架化的javascript文件app.js添加到顶部布局中。这可以通过添加以下标签来轻松完成。
<script src="{{ asset('js/app.js') }}"></script>

有两个主要的过程（取决于版本），但在结束时，您都必须执行以下操作：

npm run dev

这将把所有依赖项添加到app.js文件中。但是，如果您希望该过程自动完成，您也可以运行：

npm run watch

将会持续监视变化并加以添加。

Laravel 5.*

在这个版本的Laravel中，jQuery已作为开发依赖项包含。

你只需要运行：

npm install

这个第一条命令将安装依赖项，其中包括添加jQuery。

Laravel 6.*、7.*和8.*

laravel中已经移除了jQuery，这意味着您需要手动导入它，像这样。

npm i jquery

然后将其添加到resources/js/bootstrap.js文件中。您可能会注意到那里还导入了axios和lodash，因此我们可以以同样的方式导入jquery。

只需在您想要的任何位置添加：

//In resources/js/bootstrap.js
window.$ = require('jquery');

如果您在5.*版本中按照此过程操作，不会影响Laravel，但会安装更新版本的jQuery。

这对于 Laravel 6 不起作用，您需要下载 jQuery 库并将其添加到公共文件夹中。 - Jiren
@Jiren，你的方法也可以。我的方法与你的不同之处在于我使用laravel mix将其添加到app.js文件中。我的方法的优点是脚本管理和laravel mix使用webpack压缩您的代码。此外，您可能希望导入jquery的特定功能而不是完整的库，您可以按照我的方式进行操作。如果您因为它没有起作用而发表评论，请记住您需要执行npm run dev或npm run watch。这是我使用的方法。 - jogarcia
@Jiren 我只想说，将外部JavaScript库添加到Laravel是标准的良好实践。你只需要检查resources/js/bootstrap.js文件，就会注意到lodash和axios是以这种方式导入的。 - jogarcia
2
这很有帮助。由于某种原因，我使用npm导入了一个已经包含jquery的.js文件的库，但它却无法工作。手动获取jquery并将该行包含在bootstrap.js中解决了这个问题。Laravel在许多方面都很棒，但是对于这种类型的任务来说，学习曲线相当高。我从想要学习Laravel到被迫学习npm、mixins等，因为Laravel似乎依赖于它们。 - David Tran
在 Laravel 8 中不起作用，有其他解决方案吗？ - Amit
显示剩余10条评论
19

如果您使用npm来安装包，您可以通过npm install jquery来安装jquery，然后使用elixir将jquery和其他npm包编译成一个文件（例如vendor.js）。这是一个样例gulpfile.js。

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix

    .scripts([
        'jquery/dist/jquery.min.js',
        // list your other npm packages here
    ],
    'public/js/vendor.js', // 2nd param is the output file
    'node_modules')        // 3rd param is saying "look in /node_modules/ for these scripts"

    .scripts([
        'scripts.js'       // your custom js file located in default location: /resources/assets/js/
    ], 'public/js/app.js') // looks in default location since there's no 3rd param

    .version([             // optionally append versioning string to filename
        'js/vendor.js',    // compiled files will be in /public/build/js/
        'js/app.js'
    ]);

});
5

您可以从CDN （内容分发网络）链接库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

或者将库链接到本地，将css文件添加到css文件夹中，将jquery添加到js文件夹中。您必须将这两个文件夹保留在Laravel公共文件夹中，然后可以像下面这样链接：

<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

否则
{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}

如果您本地连接JS文件和CSS文件（就像最后两个示例中一样），则需要将 js 和 css 文件添加到位于public\js或public\css而非resources\assets的js和css文件夹中。

5
在Laravel 6中，您可以通过以下方式获取它：
try {
    window.$ = window.jQuery = require('jquery');
} catch (e) {}
1
将 require('jquery') 分配给 window.$ 和 window.jQuery 而不仅仅是分配给 window.$，在处理像 boostrap3 这样的旧库时绝对是必要的。这救了我的一天。 - Herbert Maschke
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接