[ Laravel 从入门到精通 ] 前端入门:CSS 预编译语言 Sass 快速入门教程

CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护。 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带...

[ Laravel 从入门到精通 ] 前端入门:在 Laravel 项目中使用 Bootstrap 框架

Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstrap.js(在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js)中,我们可以看到对 bootstrap js库的引入: try { ...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十五) —— 通过 Vue Transitions 实现 Vue 组件的 CSS 动画效果 & 若干 Bug 修复

你会发现我们在之前的几篇重构教程中大量使用了 CSS 动画效果,比如通知框的弹出和消失、过滤器的滑出和隐藏、编辑表单的弹出和关闭、以及隐式菜单栏的滑出和隐藏等,这些动画效果有些是从左往右的,有些是从右往左的,有些是从上往下的,还有些是从中间向四周铺开,在 Vue 组件中实现这些动画效果很简单,下面我们就以表单提交成功后在页面顶部出现的通知组件 SuccessNotification.vu...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十一) —— 功能模块重构 & CSS 整体优化:首页篇

通过前面三十篇教程的讲解,我们已经完成了 Roast 应用的所有前端功能,相信你也已经初步掌握了基于 Laravel + Vue 实现前后端分离单页面应用的开发,接下来的几篇教程我们将围绕对现有 Roast 应用进行优化展开,对底层数据结构和前端功能模块进行重构,从而让应用的整体架构更加清晰,同时对 CSS 进行优化,从而让应用看上去更加美观,以首页为例,优化后的效果是这样的: 跟之前...

[ Laravel 从入门到精通 ] 视图入门:Laravel 支持的视图格式以及在路由中的基本使用

Laravel 视图概述 我们在之前几篇教程中定义的路由大多数返回的都是纯字符串文本或者字符串拼接的 HTML,这主要是为了测试方便,在实际开发中,除了 API 路由返回指定格式数据对象外,大部分 Web 路由返回的都是视图,以便实现更加复杂的页面交互,我们在前面已经看到过了视图的定义方式: return view('以.分隔的视图模板路径'); 我们将在这篇教程中具体讨论视图实现技术。...

[ Laravel 5.7 文档 ] 前端开发 —— 使用进阶:通过 Laravel Mix 编译前端资源

简介 Laravel Mix 提供了一套流式 API,使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链,你可以流式定义资源管道。例如: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app....

[ Laravel 5.7 文档 ] 前端开发 —— 快速入门:JavaScript & CSS 脚手架

简介 Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。 CSS Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十一) —— 通过 Laravel Mix 将 SASS 编译到 Vue 组件

在为单页面应用配置 JavaScript 和 Sass 这篇教程中,我们已经为所有 Sass 资源构建了目录结构,我们可以将 Vue 组件的 Sass 资源放到这些目录中。 第一步:创建变量文件 由于我们使用 Foundation 组件来实现快速格栅功能,包含应用所有 Sass 变量的 _variables.scss 将成为最重要的文件,我们将这个文件放到 resources/asset...

[ Laravel 5.6 文档 ] 测试系列 —— 浏览器测试

简介 Laravel Dusk 提供了优雅的、易于使用的浏览器自动测试 API。默认情况下,Dusk 不强制你在机器上安装 JDK 或 Selenium,取而代之地,Dusk 基于独立安装的 ChromeDriver。不过,你可以使用任意其他兼容 Selenium 的驱动。 注:Selenium 是一套 Web 应用自动化测试系统,运行 Selenium 测试就像你在浏览器中操作一样...

[ Laravel 5.6 文档 ] 前端开发 —— 使用进阶:通过 Laravel Mix 编译前端资源

简介 Laravel Mix 提供了一套流式 API,使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链,你可以流式定义资源管道。例如: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/a...