如何在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 folder.both文件夹中添加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

对于那些使用npm来安装软件包的人,你可以安装jquery npm install 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 3

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

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

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

根据版本的不同，有两个主要过程，但在这两个过程结束时，您都必须执行：

npm run dev

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

npm run watch

Wich 将继续观察变化并添加它们。

版本 5.*

jQuery 已经作为开发依赖包含在这个版本的 laravel 中。

你只需要运行：

npm install

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

版本 6.* 和 7*

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

我将它作为开发依赖项导入这里：

npm i -D jquery

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

只需添加任何你想要的地方：

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

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

Answer 4

您可以从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 5

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

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