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

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

Laravel 使用 npm 安装前端依赖;

npm 是一个类似 composer 的工具;

用于管理前端的各种依赖包;

在使用之前需要先安装 node ;

Windows 下可以在官网下载安装: https://nodejs.org/zh-cn

Mac 上可以通过 brew 安装;

brew install node

Bash

Copy

node 已经捆绑了 npm 不需要单独安装 npm 了;

但是因为那堵墙的原因还需要设置淘宝的 npm 镜像;

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

Bash

Copy

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

npm install

Bash

Copy

在 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

Copy

当执行 npm install 的时候就和 composer install 一样;

安装完成后会生成 package-lock.json 文件;

想下 composer.lock 就能知道 package-lock.json 的作用了;

package.json 中的 scripts 和 composer.json 中的 script 作用也类似;

比如说上面的 dev script 就可以通过下面这种方式运行:

npm run dev

Bash

Copy

在开发中常用下面这 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

Copy

这里面分别定义了前端资源的源文件和处理后的目标文件路径;

| 处理前的源文件 | 处理后的文件目录 |

| 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

Copy

当我们想使用某个前端插件的时候我们可以去 https://npmjs.com 上搜索;

这一步又跟 composer 的 https://packagist.org 一毛一样;

掌握了 composer 的使用后再看 npm 也是可以很快入手的;

比如说我们想找一个 bootstrap 的日期插件;


安装插件;

npm i bootstrap-datepicker

Bash

Copy

然后引入 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

Copy

引入 css 文件使用的是 import

路径可以点开 node_modules 目录查看;

除了引用 node_modules 目录下的文件还可以引用自己创建的文件;

比如说创建一个 resources/assets/js/bootstrap-datepicker.js 文件;

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

JavaScript

Copy

引入 js 文件使用的是 require ;

在 resources/assets/js/app.js 中引入 bootstrap-datepicker ;

require('./bootstrap');
require('./bootstrap-datepicker');

JavaScript

Copy

编译合并压缩:

npm run prod

Bash

Copy

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

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

PHP

Copy

创建视图文件 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

Copy

这里使用 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

Copy

视图文件中把 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

Copy

相关文章
|
23天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
171 2
|
3天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
23天前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
23天前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
131 1
|
23天前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
26天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
26天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
366 1
|
2月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识