内容简介:Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上新增了变量、混合(MixIn)以及其它强大的功能特性,从而让我们在使用 CSS 的时候更加享受。在本文档中,我们会简要讨论 CSS 的编译,不过,你最好参考完整的Laravel Mix 文档了解更多 SASS 或 Less 的编译细节。
简介
Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。
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 文件。
移除前端脚手架代码
如果你想要从应用中移除前端脚手架代码,可以使用 preset
命令,该命令和 none
选项一起使用的时候,会从应用中移除 Bootstrap 和 Vue 脚手架代码,只留下空的 SASS 文件和一些通用的 JavaScript 实用库:
php artisan preset none
编写 CSS
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/assets/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/assets/js/app.js
文件,在 app.js
文件中你可以注册 Vue 组件,或者如果你倾向于其它 JavaScript 框架,则可以配置你自己的 JavaScript 应用。编译好的 JavaScript 文件通常会存放到 public/js
目录下。
注: app.js
文件会加载 resources/assets/js/bootstrap.js
以便启动和配置 Vue,Axios,jQuery 以及所有其它 JavaScript 依赖,如果你有额外的 JavaScript 依赖需要配置,请在这里操作。
编写 Vue 组件
默认情况下,新安装的 Laravel 应用将会在 resources/assets/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 脚手架也很简单,在所有新安装的 Laravel 应用中,使用带 react
选项的 preset
命令即可:
php artisan preset react
这个命令将会移除 Vue 脚手架代码并将其替换为 React 脚手架代码,同时包含一个示例组件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法竞赛入门经典
刘汝佳、陈锋 / 2012-10 / 52.80元
《算法竞赛入门经典:训练指南》是《算法竞赛入门经典》的重要补充,旨在补充原书中没有涉及或者讲解得不够详细的内容,从而构建一个较完整的知识体系,并且用大量有针对性的题目,让抽象复杂的算法和数学具体化、实用化。《算法竞赛入门经典:训练指南》共6章,分别为算法设计基础、数学基础、实用数据结构、几何问题、图论算法与模型和更多算法专题,全书通过近200道例题深入浅出地介绍了上述领域的各个知识点、经典思维方式......一起来看看 《算法竞赛入门经典》 这本书的介绍吧!