我刚接触 Laravel 框架。 我想在使用 Laravel 框架构建的 Web 应用程序中使用 jQuery。
但是不知道如何在 Laravel 项目中链接到 jQuery 库。
我刚接触 Laravel 框架。 我想在使用 Laravel 框架构建的 Web 应用程序中使用 jQuery。
但是不知道如何在 Laravel 项目中链接到 jQuery 库。
你可以使用在线图书馆
<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/app.js') }}"></script>
有两个主要的过程(取决于版本),但在结束时,您都必须执行以下操作:
npm run dev
这将把所有依赖项添加到app.js文件中。但是,如果您希望该过程自动完成,您也可以运行:
npm run watch
将会持续监视变化并加以添加。
在这个版本的Laravel中,jQuery已作为开发依赖项包含。
你只需要运行:
npm install
这个第一条命令将安装依赖项,其中包括添加jQuery。
laravel中已经移除了jQuery,这意味着您需要手动导入它,像这样。
npm i jquery
然后将其添加到resources/js/bootstrap.js文件中。您可能会注意到那里还导入了axios和lodash,因此我们可以以同样的方式导入jquery。
只需在您想要的任何位置添加:
//In resources/js/bootstrap.js
window.$ = require('jquery');
如果您在5.*版本中按照此过程操作,不会影响Laravel,但会安装更新版本的jQuery。
如果您使用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'
]);
});
您可以从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
文件夹中。
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
require('jquery')
分配给 window.$
和 window.jQuery
而不仅仅是分配给 window.$
,在处理像 boostrap3 这样的旧库时绝对是必要的。这救了我的一天。 - Herbert Maschke