[ Laravel 5.4 文档 ] 前端 —— JavaScript & CSS 脚手架

1、简介

Laravel 并不强制你使用什么 JavaScript 或者 CSS 预处理器,不过也确实提供了对很多应用都很有用的 BootstrapVue 的一些基本使用。默认情况下,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 应用。

2、编写CSS

Laravel 应用根目录下的 package.json 文件包含了 bootstrap-sass 扩展包以便我们使用 Bootstrap 构建前端原型,不过,你也可以按照自己应用的需要来增删 package.json 文件中的扩展包。此外,并不是必须要使用 Bootstrap 框架来构建 Laravel 应用——这只是为选择使用 Bootstrap 的开发者提供一个良好的起点。

编译 CSS 之前,使用 NPM 安装应用的前端依赖:

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 使用一个完全不同的预处理器。

3、编写JavaScript

应用所需要的所有 JavaScript 依赖都可以在应用根目录下的 package.json 中找到,这个文件和 composer.json 类似,只不过它指定的是JavaScript 依赖而不是 PHP 依赖。你可以使用NPM 来安装这些依赖:

npm install

默认情况下,Laravel 自带的 package.json 文件引入了一些扩展包,比如 vueaxios,以便快速构建 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 组件 Example.vue,这个 Vue 组件是一个单文件 Vue 组件示例,其中定义了相关的 JavaScript 和 HTML 模板,单文件组件为构建 JavaScript 驱动的应用提供了便利。这个示例组件在 app.js 中注册:

Vue.component('example', require('./components/Example.vue'));

要在应用中使用这个组件,只需要将其丢到某个HTML 模板中。例如,在运行完 Artisan 命令make:auth 创建登录和注册视图之后,就可以将这个组件丢到 Blade 模板 home.blade.php中:

@extends('layouts.app')

@section('content')
    <example></example>
@endsection

注:记住,每次修改 Vue 组件后都要运行一次 npm run dev 命令,或者,你也可以运行 npm run watch 命令进行监听,一旦组件被修改后可以自动进行重新编译。

如果你对编写 Vue 组件感兴趣,可以去阅读Vue文档,从而对 Vue 框架有更加全面的认识。

学院君 has written 715 articles

资深PHP工程师,Laravel学院院长

7 thoughts on “[ Laravel 5.4 文档 ] 前端 —— JavaScript & CSS 脚手架

  1. marion says:

    问题1:windows下npm run dev 报错:npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “D:\\Program Files (x86)\\nodejs\\node.exe” “D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “run” “development”
    npm ERR! node v6.11.0
    npm ERR! npm v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js`
    问题2:使用Vue组件使用不起

发表评论

标记为*的字段是必填项(邮箱地址不会被公开)

你可以使用这些HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>