如何在Laravel项目中添加jQuery

Question

我是 Laravel 框架的新手。 我想在使用 Laravel 框架构建的 Web 应用程序中使用 jQuery。

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

Answer 1

您可以使用在线图书馆

<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 并在 js 文件夹中添加 jquery。这两个文件夹都保存在 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') }}

Answer 2

要将 jquery 添加到 laravel，您首先必须将 Scaffolded javascript 文件 app.js 添加到您的顶部布局。

添加此标签可以轻松完成。

<script src="{{ asset('js/app.js') }}"></script>

有两个主要过程，具体取决于版本，但在两个过程的end，您都必须执行：

npm run dev

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

npm run watch

Wich 将继续关注更改并添加它们。

Laravel 5.*

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

你只需要跑：

npm install

第一个命令将安装依赖项。将添加jquery。

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

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

npm i jquery

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

只需添加到您想要的位置即可：

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

如果您在 5.* 版本中遵循此过程，它不会影响 laravel，但会安装更新版本的 jquery。

Answer 3

对于那些使用 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'
    ]);

});

Answer 4

在 Laravel 6 中你可以这样得到它：

try {
    window.$ = window.jQuery = require('jquery');
} catch (e) {}

Answer 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文件，在js文件夹中添加jquery。您必须将这两个文件夹保留在 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

文件添加到

js

或

css

中的

public\js

和

public\css

文件夹中不在

resources\assets

。

Answer 6

我无法响应您的请求。 Laravel 11 已安装 VITE，您可以在 VITE 中单独使用相关规则。 洛斯帕索斯儿子：

1. 安装jquery
2. Buscas el archivo donde se instalo en tu proyecto laravel
3. boton derecho y copias la ruta relativa。
4. la pones en vite como en el ejemplo, te la pondra con las contra barras () tenes que cambiarlas por las barras normales (/).
5. npm 运行开发 清单！

ejemplo:

   @vite(['resources/css/app.css', 'resources/js/app.js','resources/jquery/jquery.js'])