快速入门：JavaScript & CSS 脚手架 | 前端开发 | Laravel 6 中文文档
Laravel 学院
文档
Laravel 8.x 中文文档
Laravel 7.x 中文文档
Laravel 6.x 中文文档
Laravel 5.8 中文文档
Laravel 5.7 中文文档
Laravel 5.6 中文文档
Laravel 5.5 中文文档
Laravel 5.4 中文文档
Laravel 5.3 中文文档
Laravel 5.2 中文文档
Laravel 5.1 中文文档
Lumen 中文文档
全栈教程
PHP 全栈工程师指南
PHP 入门到实战
Laravel 入门到精通
Vue.js 入门到实战
玩转 PhpStorm 教程
Laravel 博客入门项目
Laravel 微信小程序项目
Laravel 前后端分离项目
Swoole 入门到实战
Eloquent 性能优化实战
Redis 高性能实战系列
Laravel 新版本特性
PHP 新特性与最佳实践
Golang
Go 入门教程
Go Web 编程
Gin 使用教程
微服务开发
内功修炼
数据结构与算法
网络协议
微服务从入门到实践
高性能 MySQL 实战
高性能 Redis 实战
Laravel 消息队列实战
Laravel 从学徒到工匠
PHP 设计模式系列
名企面试指南
资源库
Laravel 资源大全
Laravel 开源项目
Laravel 扩展包
Laravel 资源下载
更多
博客 & 新闻
问答 & 讨论
Leetcode 题解
学院君读书笔记系列
关于 Laravel 学院
Laravel 互助学习群
Golang 互助学习群
更多
Laravel 中文文档
Laravel 全栈教程
Laravel 学习路径
Go 入门教程
程序员内功修炼
博客
问答
搜索
注册
登录
Info
Content
章节导航
Laravel 6 中文文档
目录索引
序言
3篇文章
新版特性
升级指南
贡献指南
快速入门
5篇文章
安装配置
目录结构
重量级开发环境：Homestead
轻量级开发环境：Valet
部署应用到服务器
核心架构
5篇文章
一次 Laravel 请求的生命周期
服务容器
服务提供者
门面
契约
基础组件
12篇文章
路由
中间件
CSRF 保护
控制器
HTTP 请求
HTTP 响应
视图
URL 生成
Session
表单验证
异常处理
日志
前端开发
4篇文章
Blade 模板引擎
本地化
快速入门：JavaScript & CSS 脚手架
使用进阶：通过 Laravel Mix 编译前端资源
安全系列
7篇文章
登录认证
API 认证
授权
邮箱验证
加密
哈希
重置密码
进阶系列
12篇文章
Artisan 控制台
广播
缓存
集合
事件
文件存储
辅助函数
邮件
通知
扩展包开发
队列
任务调度
数据库操作
6篇文章
快速入门
查询构建器
分页
迁移
数据填充
Redis
Eloquent模型
6篇文章
快速入门
关联关系
集合
API 资源类
访问器和修改器
序列化
测试系列
6篇文章
快速入门
HTTP 测试
浏览器测试
控制台测试
数据库测试
模拟
官方扩展包
7篇文章
订阅支付解决方案：Laravel Cashier
远程操作解决方案：Laravel Envoy
队列系统解决方案：Laravel Horizon
API 认证解决方案：Laravel Passport
全文搜索解决方案：Laravel Scout
第三方登录解决方案：Laravel Socialite
本地开发调试解决方案：Laravel Telescope
图书
Laravel 6 中文文档
前端开发
快速入门：JavaScript & CSS 脚手架
快速入门：JavaScript & CSS 脚手架
由 学院君 创建于3年前, 最后更新于 3年前
版本号 #1
8391 views
1 likes
0 collects
简介
Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器，不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下，Laravel 使用 NPM 来安装这些前端包。
Laravel 提供的 Bootstrap 和 Vue 脚手架代码位于 laravel/ui 依赖包中，需要通过 Composer 下载安装：
composer require laravel/ui --dev
laravel/ui 包安装完成后，可以使用 Artisan 命令 ui 来初始化前端脚手架：
// Generate basic scaffolding...
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui vue --auth
php artisan ui react --auth
CSS
Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less，SASS 和 Less 都是在原生 CSS 的基础上新增了变量、混合（MixIn）以及其它强大的功能特性，从而让我们在使用 CSS 的时候更加享受。
在本文档中，我们会简要讨论 CSS 的编译，不过，你最好参考完整的 Laravel Mix 文档了解更多 SASS 或 Less 的编译细节。
JavaScript
Laravel 并不强制你使用指定的 JavaScript 框架或库来构建应用，事实上，你也可以完全不使用 JavaScript，不过，Laravel 还是引入了一些基本的脚手架：使用 Vue 库让我们更轻松地编写现代 JavaScript。Vue 提供了优雅的 API 让我们可以通过组件构建强大的 JavaScript 应用。和 CSS 一样，我们可以使用 Laravel Mix 轻松将多个 JavaScript 组件编译到单个 JavaScript 文件。
编写 CSS
安装完 laravel/ui Composer 依赖包并生成前端脚手架代码之后，Laravel 应用根目录下的 package.json 文件将会包含 bootstrap 扩展包以便我们使用 Bootstrap 构建前端原型，不过，你也可以按照自己应用的需要来增删 package.json 文件中的扩展包。此外，并不是必须要使用 Bootstrap 框架来构建 Laravel 应用 —— 这只是为选择使用 Bootstrap 的开发者提供一个良好的起点。
编译 CSS 之前，使用 NPM 安装应用的前端依赖（在此之前确保系统已经安装过 Node.js）：
npm install
使用 npm install 安装好前端依赖之后，可以使用 Laravel Mix 将 SASS 文件编译为纯 CSS，npm run dev 命令会处理 webpack.mix.js 文件中的声明。通常，编译好的 CSS 文件会存放到 public/css 目录下：
npm run dev
Laravel 自带的默认 webpack.mix.js 文件会编译 SASS 文件 resources/sass/app.scss，这个 app.scss 文件将会导入一个包含 SASS 变量的文件并加载 Bootstrap，从而助力我们快速在应用中引入 Bootstrap 资源。你也可以按照自己的需要自定义 app.scss 文件，甚至可以通过配置 Laravel Mix 使用一个完全不同的预处理器。
编写 JavaScript
应用所需要的所有 JavaScript 依赖都可以在应用根目录下的 package.json 中找到，这个文件和 composer.json 类似，只不过它指定的是 JavaScript 依赖而不是 PHP 依赖。你可以使用NPM 来安装这些依赖：
npm install
注：默认情况下，Laravel 自带的 package.json 文件引入了一些扩展包，比如 vue 和 axios，以便快速构建 JavaScript 应用，同样，你可以按照应用的需要增删 package.json 中的扩展包。
扩展包安装好之后，可以使用 npm run dev 命令来编译前端资源，Webpack 是为现代 JavaScript 应用提供的模块捆绑器，当你执行 npm run dev 命令的时候，Webpack 将会执行webpack.mix.js 中的指令：
npm run dev
默认情况下，Laravel 自带的 webpack.mix.js 将会编译 SASS 和 resources/js/app.js 文件，在 app.js 文件中你可以注册 Vue 组件，或者如果你倾向于其它 JavaScript 框架，则可以配置你自己的 JavaScript 应用。编译好的 JavaScript 文件通常会存放到 public/js 目录下。
注：app.js 文件会加载 resources/js/bootstrap.js 以便启动和配置 Vue，Axios，jQuery 以及所有其它 JavaScript 依赖，如果你有额外的 JavaScript 依赖需要配置，请在这里操作。
编写 Vue 组件
默认情况下，新安装的 Laravel 应用将会在 resources/js/components 目录下包含一个 Vue 组件 ExampleComponent.vue，这个 Vue 组件是一个单文件 Vue 组件示例，其中定义了相关的 JavaScript 和 HTML 模板，单文件组件为构建 JavaScript 驱动的应用提供了便利。这个示例组件在 app.js 中注册：
Vue.component(
'example',
require('./components/ExampleComponent.vue')
);
要在应用中使用这个组件，只需要将其丢到某个 HTML 模板中。例如，在运行完 Artisan 命令 make:auth 创建登录和注册视图之后，就可以将这个组件丢到 Blade 模板 home.blade.php中：
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
注：记住，每次修改 Vue 组件后都要运行一次 npm run dev 命令，或者，你也可以运行 npm run watch 命令进行监听，一旦组件被修改后可以自动进行重新编译。
如果你对编写 Vue 组件感兴趣，可以去阅读Vue文档，从而对 Vue 框架有更加全面的认识。
使用 React
如果你更喜欢使用 React 来构建 JavaScript 应用，在 Laravel 中从 Vue 脚手架切换到 React 脚手架也很简单：
composer require laravel/ui --dev
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui react --auth
这个命令将会移除 Vue 脚手架代码并将其替换为 React 脚手架代码，同时包含一个示例组件。
添加预设命令
预设命令是「macroable」的，允许你在运行时添加额外方法到 UiCommand 类，例如，下面这段代码会添加一个 nextjs 方法到 UiCommand 类。通常，你需要在服务提供者中声明预设宏：
use Laravel\Ui\UiCommand;
UiCommand::macro('nextjs', function (UiCommand $command) {
// Scaffold your frontend...
});
然后，你就可以通过 ui 命令调用新的预设了：
php artisan ui nextjs
相关教程推荐：
在 Laravel 项目中使用 Bootstrap 框架
在 Laravel 中编写 Sass 入门教程
在 Laravel 中编写第一个 Vue 组件
Laravel
6.0
文档
扩展包
前端
JavaScript
Vue
CSS
React
Vue组件
NPM
脚手架
UI
点赞
取消点赞
收藏
取消收藏
赞赏
分享到以下平台：
<< 上一篇:
本地化
>> 下一篇:
使用进阶：通过 Laravel Mix 编译前端资源
无评论
登录后即可添加评论
升级为学院君订阅用户(新年优惠🎁)
内容导航
简介
编写 CSS
编写 JavaScript
编写 Vue 组件
使用 React
添加预设命令
相关推荐
快速入门：JavaScript & CSS 脚手架
Laravel 5.5 中文文档
前端开发
快速入门：JavaScript & CSS 脚手架
Laravel 5.6 中文文档
前端开发
快速入门：JavaScript & CSS 脚手架
Laravel 5.7 中文文档
前端开发
快速入门：JavaScript & CSS 脚手架
Laravel 5.8 中文文档
前端开发
JavaScript & CSS 脚手架
Laravel 7 中文文档
前端开发
回到顶部
2022 基于 Laravel 6 构建
关于学院
订阅服务
友情链接
站点地图
本站 CDN 加速服务由又拍云赞助