最适合入门的Laravel中级教程(四)前端开发

DXYHW 2024-09-12 21:11:57 原文

Laravel 使用 npm 安装前端依赖；
npm 是一个类似 composer 的工具；
用于管理前端的各种依赖包；
在使用之前需要先安装 node ；
Windows 下可以在官网下载安装： https://nodejs.org/zh-cn
Mac 上可以通过 brew 安装；

brew install node

Bash

node 已经捆绑了 npm 不需要单独安装 npm 了；
但是因为那堵墙的原因还需要设置淘宝的 npm 镜像；

npm config set registry https://registry.npm.taobao.org

Bash

然后就可以执行安装命令了；

npm install

Bash

在 Laravel 项目根目录下有一个类似 composer.json 的 package.json 文件；

{

    "private": true,

    "scripts": {

        "dev": "npm run development",

        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

        "watch-poll": "npm run watch -- --watch-poll",

        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

        "prod": "npm run production",

        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

    },

    "devDependencies": {

        "axios": "^0.17",

        "bootstrap-sass": "^3.3.7",

        "cross-env": "^5.1",

        "jquery": "^3.2",

        "laravel-mix": "^1.0",

        "lodash": "^4.17.4",

        "vue": "^2.5.7"

    }

}

JSON

当执行 npm install 的时候就和 composer install 一样；
安装完成后会生成 package-lock.json 文件；
想下 composer.lock 就能知道 package-lock.json 的作用了；
package.json 中的 scripts 和 composer.json 中的 script 作用也类似；
比如说上面的 dev script 就可以通过下面这种方式运行：

npm run dev

Bash

在开发中常用下面这 3 个命令；
| 命令 | 作用 |
| dev | 编译、合并 |
| prod | 编译、合并、压缩 |
| watch | 自动监听文件变动进行编译、合并 |
这些 script 都是依赖 webpack 来打包压缩合并；
webpack 的配置对后端开发人员来说有那么一点不直观；
Laravel 官方又提供了 laravel-mix 来简化 webpack ；
在 Laravel 项目根目录中的 webpack.mix.js 就是 webpack 的配置文件；

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')

   .sass('resources/assets/sass/app.scss', 'public/css');

JavaScript

这里面分别定义了前端资源的源文件和处理后的目标文件路径；
| 处理前的源文件 | 处理后的文件目录 |
| resources/assets/js/app.js | public/js |
| resources/assets/sass/app.scss | public/css |
默认情况下 resources/assets/js/app.js 中引入了 bootstrap.js 和 vue.js ；
这里示例先只保留 bootstrap.js ；
resources/assets/js/app.js

require('./bootstrap');

JavaScript

当我们想使用某个前端插件的时候我们可以去 https://npmjs.com 上搜索；
这一步又跟 composer 的 https://packagist.org 一毛一样；
掌握了 composer 的使用后再看 npm 也是可以很快入手的；
比如说我们想找一个 bootstrap 的日期插件；

安装插件；

npm i bootstrap-datepicker

Bash

然后引入 css 文件；
resources/assets/sass/app.scss

// Fonts

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables

@import "variables";

// Bootstrap

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker";

JavaScript

引入 css 文件使用的是 import ；
路径可以点开 node_modules 目录查看；
除了引用 node_modules 目录下的文件还可以引用自己创建的文件；
比如说创建一个 resources/assets/js/bootstrap-datepicker.js 文件；

require('bootstrap-datepicker/dist/js/bootstrap-datepicker');

$('.datepicker').datepicker();

JavaScript

引入 js 文件使用的是 require ;
在 resources/assets/js/app.js 中引入 bootstrap-datepicker ；

require('./bootstrap');

require('./bootstrap-datepicker');

JavaScript

编译合并压缩：

npm run prod

Bash

创建示例路由 routes/web.php ;

Route::view('mix/view', 'mix.view');

PHP

创建视图文件 resources/views/mix/view.blade.php ；

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>前端</title>

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

</head>

<body>

<input class="datepicker" type="text">

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

</body>

</html>

HTML

这里使用 asset() 函数生成资源链接；

一个日期插件就这样完成了；
查看源代码可以发现所有的 css 和 js 内容都合并成了 app.css 和 app.js；

但是现在还不完美；
因为当我们改动文件后容易因为缓存不能及时加载新的 css 和 js ；
常见的做法是给 css 和 js 加个版本号；
这在 Laravel 也很容易实现；
只需要在 webpack.mix.js 中使用 version();
webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')

   .sass('resources/assets/sass/app.scss', 'public/css')

   .version();

JavaScript

视图文件中把 asset() 换成 mix() 即可;
resources/views/mix/view.blade.php

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>前端</title>

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">

</head>

<body>

<input class="datepicker" type="text">

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

</body>

</html>

HTML

最适合入门的Laravel中级教程(四)前端开发的更多相关文章

最适合入门的Laravel中级教程(一)
Laravel 是一个全栈框架: 我们使用 Laravel 开发业务常见有 3 个方向: 前端页面和后端逻辑混合的应用主要是面向对 SEO 有需求的项目: 比如说新闻资讯博客文章等: 一般在控制器中 ...
最适合入门的Laravel中级教程(二)用户认证
之前的初级教程主要是学习简单的增删改查: 接着的中级教程的目标是在初级教程的基础上能写出更复杂更健壮的程序: 我们先来学习 laravel 的用户认证功能: 在现代网站中基本都有用户系统: 而我们每开 ...
最适合入门的Laravel中级教程(三)表单验证
做开发有个原则是永远不能信任用户输入的数据: 即便前端已经做了验证: 在后端 php 也必须要再次验证: laravel 为表单验证提供了强大且简单的方案: 创建示例路由: routes/web.ph ...
CSS预编译器：Sass（入门），更快的前端开发
SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...
Laravel初级教程浅显易懂适合入门
整理了一些Laravel初级教程,浅显易懂,特适合入门,留给刚学习laravel想快速上手有需要的朋友最适合入门的laravel初级教程(一)序言最适合入门的laravel初级教程(二)安装使用 ...
Laravel 5 系列入门教程（一）【最适合中国人的 Laravel 教程】
Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程] 分享⋅ johnlui⋅ 于 2年前 ⋅ 最后回复由 skys215于 11个月前 ⋅ 17543 阅读原文发表在 ...
Laravel 从入门到精通系列教程
转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...
无废话ExtJs 入门教程四[表单：FormPanel]
无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...
Laravel教程四：数据库和Eloquent
Laravel教程四:数据库和Eloquent 此文章为原创文章,未经同意,禁止转载. Eloquent Database 上一篇写了一些Laravel Blade的基本用法和给视图传递变量的几种方 ...

随机推荐

[转] C++ 和 python之间的互相调用
转载自:https://www.cnblogs.com/apexchu/p/5015961.html 一.Python调用C/C++ 1.Python调用C动态链接库 Python调用C库比较简单,不 ...
11--Python入门--面向对象
面向对象是Python的特点.面向对象主要通过类class的定义来实现.类class是用来描述具有相同属性和方法的对象的集合.类定义了该集合中的每个对象的共有属性和方法可以将类理解为一个模块,模块中包 ...
echarts背景分割区域填充不同颜色(x轴为time)，实时刷新
先来看下图片吧,这是实现效果: 思路: 因为要实时刷新,可以使用setInterval(),但是要控制好定时器的起与停,否则容易错乱以及页面卡死: 主要就是利用定时器五秒刷新,重绘echarts图:= ...
Centos系统下 Gitolite安装与相关配置（git权限控制软件）
确保已经安装了最新版的git服务Git源码安装 Linux指定安装目录,并且创建了用户名为git 的账户修改.gitolite.rc #设置gitolite管理的仓库目录 GL_REPO_BAS ...
《DSP using MATLAB》Problem 7.3
hibernate一级缓存和快照
摘自网络: Hibernate中的一级缓存的底层是以Map形式存在的,key是主键,value是对象,所以它的泛型为Map<Serializable,Object>,key的泛型为串行化是 ...
ios-屏幕适配(代码)
由于第一个项目中98%的界面都用到UITableView,所以适配仅判断此.知道手工敲代码的繁复,遂传一部分,如果有更优的方法,欢迎提出. 如下图,图中提到的宏定义是在prefix.pch预编绎文件里 ...
vs2017 打开cs文件提示无法识别的GUID格式
总结一句话 no zuo no die. 是我自己在注册表中给vs增加了自动以管理员身份运行,把值给错了,弄成了 ~ RUNASADMIN WIN7RTM, 改成 ~ RUNASADMIN 后OK.还 ...
Tomcat性能调优后，启动出现警告问题 [did not find a matching property.]
http://blog.csdn.net/dracotianlong/article/details/8963594 Tomcat性能调优后, 启动出现警告问题 [did not find a mat ...
纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...