前端指南 · laravel 5.4

<article><h1>Laravel 的前端资源处理 JavaScript 和 CSS 构建</h1><ul><li><a href="#introduction">简介</a></li><li><a href="#writing-css">编写 CSS</a></li><li><a href="#writing-javascript">编写 JavaScript</a><ul><li><a href="#writing-vue-components">编写 Vue 组件</a></li></ul></li></ul><a name="introduction"></a><h2><a href="#introduction">简介</a></h2>Laravel 并没有规定你使用哪个 JavaScript 或 CSS 预处理器，不过默认提供了对大多数应用都很适用的 <a href="http://getbootstrap.com">Bootstrap</a> 和 <a href="https://vuejs.org">Vue</a> 来作为起点。 Laravel 默认使用 <a href="https://npmjs.org">NPM</a> 安装这些前端的依赖。<h4>CSS</h4><a href="/docs/5.4/mix">Laravel Mix</a> 提供了一个简洁、富有表现力的 API 来编译 SASS 或 Less，这些 CSS 预处理语言扩充了 CSS 语言，增加了诸如变量、混合（mixins）及其他一些强大的功能让编写 CSS 代码变得更加有趣。尽管我们会在这里简要的讨论 CSS 编译的内容，但是，你应该访问 <a href="/docs/5.4/mix">Laravel Mix 文档</a> 获取更多关于编译 SASS 或 Less 的信息。<h4>JavaScript</h4>Laravel 并不需要你使用特定的 JavsScript 框架或者库来构建应用程序。事实上，你也可以完全不用 JavaScript。不过，Laravel 自带了用 <a href="https://vuejs.org">Vue</a> 实现的基本脚手架代码来帮你更轻松的开始现代化 JavaScript 编码。Vue 提供了强大的组件化 API 用来构建健壮的 JavaScript 应用程序。<a name="writing-css"></a><h2><a href="#writing-css">编写 CSS</a></h2>在 Laravel 的根目录中的 <code class=" language-php">Package.json</code> 文件引入了 <code class=" language-php">bootstrap-sass</code> 依赖包可以帮助你使用 Bootstrap 制作应用程序的前端原型。不过，你可以根据自己应用程序的需要在 <code class=" language-php">package.json</code> 灵活的添加或者移除依赖包。使用 Bootstrap 框架来构建你的 Laravel 应用程序并不是必选项，它只是给那些想用它的人提供一个很好的起点。编译 CSS 代码之前，需要你先使用 NPM 来安装前端的依赖：<pre class=" language-php"><code class=" language-php">npm install</code></pre>使用 <code class=" language-php">npm install</code> 成功安装依赖之后，你就可以使用 <a href="/docs/5.4/mix#working-with-stylesheets">Laravel Mix</a> 来将 SASS 文件编译为纯 CSS。.<code class=" language-php">npm run dev</code> 命令会执行处理 <code class=" language-php">webpack.mix.js</code> 文件中的指令。通常情况下，编译好的 CSS 代码会被放置在 <code class=" language-php">public/css</code> 目录：<pre class=" language-php"><code class=" language-php">npm run dev</code></pre>默认情况下，<code class=" language-php">webpack.mix.js</code> 会编译 <code class=" language-php">resources/assets/sass/app.scss</code> SASS 文件。<code class=" language-php">app.scss</code> 文件导入了一个包含 SASS 变量的文件，加载了 Bootstrap 框架，这对大多数程序来说是一个很好的出发点。你也可以根据自己的需要去定制 <code class=" language-php">app.scss</code> 文件的内容，甚至使用完全不同的预处理器，详细配置见 <a href="/docs/5.4/mix">配置 Laravel Mix</a>。<a name="writing-javascript"></a><h2><a href="#writing-javascript">编写 JavaScript</a></h2>在项目根目录中的 <code class=" language-php">package.json</code> 可以找到应用程序的所有 JavaScript 依赖。它和 <code class=" language-php">composer.json</code> 文件类似，不同的是它指定的是 JavaScript 的依赖而不是 PHP 的依赖。使用 <a href="https://npmjs.org">Node 包管理器 (NPM)</a> 来安装这些依赖包：<pre class=" language-php"><code class=" language-php">npm install</code></pre>Laravel <code class=" language-php">package.json</code> 文件默认会包含一些依赖包来帮助你开始建立 JavaScript 应用程序，例如 <code class=" language-php">vue</code> 和 <code class=" language-php">axios</code> 。你可以根据自己程序的需要在 <code class=" language-php">package.json</code> 中添加或者移除依赖。成功安装依赖之后，你就可以使用 <code class=" language-php">npm run dev</code> 命令来 <a href="/docs/5.4/mix">编译资源文件</a> 。Webpack 是一个为现代 JavaScript 应用而生的模块构建工具。当你运行 <code class=" language-php">npm run dev</code> 命令时，Webpack 会执行 <code class=" language-php">webpack.mix.js</code> 文件中的指令：<pre class=" language-php"><code class=" language-php">npm run dev</code></pre>默认情况下，<code class=" language-php">webpack.mix.js</code> 会编译 SASS 文件和 <code class=" language-php">resources/assets/js/app.js</code> 文件。你可以在 <code class=" language-php">app.js</code> 文件中注册你的 Vue 组件，或者如果你更喜欢其他的框架，也可以在这里进行配置。编译好的 JavaScript 文件通常会放置在 <code class=" language-php">public/js</code> 目录。<blockquote class="has-icon tip"><div class="flag"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="56.6px" height="87.5px" viewBox="0 0 56.6 87.5" enable-background="new 0 0 56.6 87.5" xml:space="preserve"><path fill="#FFFFFF" d="M28.7 64.5c-1.4 0-2.5-1.1-2.5-2.5v-5.7 -5V41c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10.1 5 5.8C31.2 63.4 30.1 64.5 28.7 64.5zM26.4 0.1C11.9 1 0.3 13.1 0 27.7c-0.1 7.9 3 15.2 8.2 20.4 0.5 0.5 0.8 1 1 1.7l3.1 13.1c0.3 1.1 1.3 1.9 2.4 1.9 0.3 0 0.7-0.1 1.1-0.2 1.1-0.5 1.6-1.8 1.4-3l-2-8.4 -0.4-1.8c-0.7-2.9-2-5.7-4-8 -1-1.2-2-2.5-2.7-3.9C5.8 35.3 4.7 30.3 5.4 25 6.7 14.5 15.2 6.3 25.6 5.1c13.9-1.5 25.8 9.4 25.8 23 0 4.1-1.1 7.9-2.9 11.2 -0.8 1.4-1.7 2.7-2.7 3.9 -2 2.3-3.3 5-4 8L41.4 53l-2 8.4c-0.3 1.2 0.3 2.5 1.4 3 0.3 0.2 0.7 0.2 1.1 0.2 1.1 0 2.2-0.8 2.4-1.9l3.1-13.1c0.2-0.6 0.5-1.2 1-1.7 5-5.1 8.2-12.1 8.2-19.8C56.4 12 42.8-1 26.4 0.1zM43.7 69.6c0 0.5-0.1 0.9-0.3 1.3 -0.4 0.8-0.7 1.6-0.9 2.5 -0.7 3-2 8.6-2 8.6 -1.3 3.2-4.4 5.5-7.9 5.5h-4.1H28h-0.5 -3.6c-3.5 0-6.7-2.4-7.9-5.7l-0.1-0.4 -1.8-7.8c-0.4-1.1-0.8-2.1-1.2-3.1 -0.1-0.3-0.2-0.5-0.2-0.9 0.1-1.3 1.3-2.1 2.6-2.1H41C42.4 67.5 43.6 68.2 43.7 69.6zM37.7 72.5H26.9c-4.2 0-7.2 3.9-6.3 7.9 0.6 1.3 1.8 2.1 3.2 2.1h4.1 0.5 0.5 3.6c1.4 0 2.7-0.8 3.2-2.1L37.7 72.5z"></path></svg></div> <code class=" language-php">app.js</code> 会加载 <code class=" language-php">resources/assets/js/bootstrap.js</code> 文件来启动、配置 Vue，Vue Resource，jQuery，以及其他的 JavaScript 依赖。如果你有额外的 JavaScript 依赖需要去配置，你也可以在这个文件中完成。</blockquote><a name="writing-vue-components"></a><h3>编写 Vue 组件</h3>全新安装的 Laravel 程序默认会在 <code class=" language-php">resources/assets/js/components</code> 中包含一个 <code class=" language-php">Example.vue</code> 的 Vue 组件。<code class=" language-php">Example.vue</code> 文件是一个 <a href="https://vuejs.org/guide/application.html#Single-File-Components">单文件 Vue 组件</a> 的示例，单文件 Vue 组件允许我们在同一个文件中编写 JavaScript 和 HTML 模板，它提供了一种非常方便的方式去构建 JavaScript 驱动的应用程序。这个示例组件注册在 <code class=" language-php">app.js</code> 文件。<pre class=" language-php"><code class=" language-php">Vue.component('example', require('./components/Example.vue'));</code></pre>在应用程序中使用示例组件，你只需要简单的将其放到你的 HTML 模板之中。例如，在你运行 <code class=" language-php">make:auth</code> Artisan 命令去生成应用的用户认证和注册的脚手架页面后，你可以把组件放到 <code class=" language-php">homde.blade.php</code> Blade 模板：<pre class=" language-php"><code class=" language-php">@extends('layouts.app') @section('content') <example></example> @endsection</code></pre><blockquote class="has-icon tip"><div class="flag"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="56.6px" height="87.5px" viewBox="0 0 56.6 87.5" enable-background="new 0 0 56.6 87.5" xml:space="preserve"><path fill="#FFFFFF" d="M28.7 64.5c-1.4 0-2.5-1.1-2.5-2.5v-5.7 -5V41c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10.1 5 5.8C31.2 63.4 30.1 64.5 28.7 64.5zM26.4 0.1C11.9 1 0.3 13.1 0 27.7c-0.1 7.9 3 15.2 8.2 20.4 0.5 0.5 0.8 1 1 1.7l3.1 13.1c0.3 1.1 1.3 1.9 2.4 1.9 0.3 0 0.7-0.1 1.1-0.2 1.1-0.5 1.6-1.8 1.4-3l-2-8.4 -0.4-1.8c-0.7-2.9-2-5.7-4-8 -1-1.2-2-2.5-2.7-3.9C5.8 35.3 4.7 30.3 5.4 25 6.7 14.5 15.2 6.3 25.6 5.1c13.9-1.5 25.8 9.4 25.8 23 0 4.1-1.1 7.9-2.9 11.2 -0.8 1.4-1.7 2.7-2.7 3.9 -2 2.3-3.3 5-4 8L41.4 53l-2 8.4c-0.3 1.2 0.3 2.5 1.4 3 0.3 0.2 0.7 0.2 1.1 0.2 1.1 0 2.2-0.8 2.4-1.9l3.1-13.1c0.2-0.6 0.5-1.2 1-1.7 5-5.1 8.2-12.1 8.2-19.8C56.4 12 42.8-1 26.4 0.1zM43.7 69.6c0 0.5-0.1 0.9-0.3 1.3 -0.4 0.8-0.7 1.6-0.9 2.5 -0.7 3-2 8.6-2 8.6 -1.3 3.2-4.4 5.5-7.9 5.5h-4.1H28h-0.5 -3.6c-3.5 0-6.7-2.4-7.9-5.7l-0.1-0.4 -1.8-7.8c-0.4-1.1-0.8-2.1-1.2-3.1 -0.1-0.3-0.2-0.5-0.2-0.9 0.1-1.3 1.3-2.1 2.6-2.1H41C42.4 67.5 43.6 68.2 43.7 69.6zM37.7 72.5H26.9c-4.2 0-7.2 3.9-6.3 7.9 0.6 1.3 1.8 2.1 3.2 2.1h4.1 0.5 0.5 3.6c1.4 0 2.7-0.8 3.2-2.1L37.7 72.5z"></path></svg></div> 谨记，你需要在每次修改 Vue 组件后都需要运行 <code class=" language-php">npm run dev</code> 命令。或者，你可以使用 <code class=" language-php">npm run watch</code> 命令来监控并在每次文件被修改时自动重新编译组件。</blockquote>当然，如果你对学习更多编写 Vue 组件的内容感兴趣，你可以读一下 <a href="http://vuejs.org/guide/">Vue 官方引导文档</a>，它提供了一个透彻、易懂的文档让你一览 Vue 框架的概貌。</article>