我们需要为我们的项目构建一个基础的页面布局，布局文件统一存放在 resources/views/layouts 文件夹中，布局涉及的文件如下：
- app.blade.php —— 主要布局文件，项目的所有页面都将继承于此页面；
- _header.blade.php —— 布局的头部区域文件，负责顶部导航栏区块；
- _footer.blade.php —— 布局的尾部区域文件，负责底部导航区
我们先创建主要布局文件：resources/views/layouts/app.blade.php：
$ mkdir -p resources/views/layouts/
$ touch resources/views/layouts/app.blade.phpresources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield(‘title‘, ‘Laravel Shop‘) - Laravel 电商教程</title>
<!-- 样式 -->
<link href="{{ mix(‘css/app.css‘) }}" rel="stylesheet">
</head>
<body>
<div id="app" class="{{ route_class() }}-page">
@include(‘layouts._header‘)
<div class="container">
@yield(‘content‘)
</div>
@include(‘layouts._footer‘)
</div>
<!-- JS 脚本 -->
<script src="{{ mix(‘js/app.js‘) }}"></script>
</body>
</html>route_class() 是我们自定义的辅助方法，我们还需要在 helpers.php 文件中添加此方法：
bootstrap/helpers.php
function route_class()
{
return str_replace(‘.‘, ‘-‘, Route::currentRouteName());
}此方法会将当前请求的路由名称转换为 CSS 类名称，作用是允许我们针对某个页面做页面样式定制。在后面的章节中会用到。
顶部导航
下面创建顶部导航模板：
$ touch resources/views/layouts/_header.blade.phpresources/views/layouts/_header.blade.php
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url(‘/‘) }}">
Laravel Shop
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</nav>注册登录链接我们将在后面章节中修改。
底部导航
创建文件：
$ touch resources/views/layouts/_footer.blade.phpresources/views/layouts/_footer.blade.php
<footer class="footer">
<div class="container">
<p class="pull-left">
由 <a href="http://weibo.com/u/1837553744?is_hot=1" target="_blank">Leo</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">?</span>
</p>
<p class="pull-right"><a href="mailto:[email protected]">联系我们</a></p>
</div>
</footer>首页展示
1. 创建控制器
我们将使用控制器 PagesController 来处理所有自定义页面的逻辑，并使用 root() 方法来处理首页的展示。
执行以下命令新建控制器：
$ php artisan make:controller PagesController将会生成 app/Http/Controllers/PagesController.php 这个文件，我们里面新增 root() 方法：
app/Http/Controllers/PagesController.php
.
.
.
public function root()
{
return view(‘pages.root‘);
}2. 视图
控制器 root() 方法中加载了视图 pages.root，目前我们还没有此视图文件，前往创建：
$ mkdir -p resources/views/pages/
$ touch resources/views/pages/root.blade.phpresources/views/pages/root.blade.php
@extends(‘layouts.app‘)
@section(‘title‘, ‘首页‘)
@section(‘content‘)
<h1>这里是首页</h1>
@stopLaravel 自带了一个主页视图 welcome.blade.php，既然我们已经自定义了主页视图，即可将废弃的主页视图删除：
$ rm resources/views/welcome.blade.php3. 绑定路由
接下来绑定下路由，将 web.php 里的内容替换掉：
routes/web.php
<?php
Route::get(‘/‘, ‘[email protected]‘)->name(‘root‘);4. 运行 Laravel Mix
Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。
使用 Mix 很简单，首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖，在这之前，因为国内的网络原因，我们还需为 Yarn 配置安装加速：
$ yarn config set registry https://registry.npm.taobao.org使用 Yarn 安装依赖：
$ SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn在 yarn 命令前添加 SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass 的目的是告诉 yarn 到淘宝的镜像去下载 node-sass 二进制文件。
然后我们还需要修改一下 Mix 的配置文件：
webpack.mix.js
.
.
.
mix.js(‘resources/assets/js/app.js‘, ‘public/js‘)
.sass(‘resources/assets/sass/app.scss‘, ‘public/css‘)
.version();在末尾加了一个 version()，使 Mix 每次生成的静态文件后面加上一个类似版本号的参数，避免浏览器缓存。
然后，运行以下命令即可：
$ npm run watch-pollwatch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译。
注意：在后面的课程中，我们需要保证
npm run watch-poll一直处在执行状态中。
Windows 用户如果遇到报错请参考 https://learnku.com/laravel/t/13277/in-learning-lessons-there-are-always-craters-recording-solutions
优化页首与页脚
接下来我们来调整一下样式，样式代码在 resources/assets/sass/app.scss，是用 SASS 编写的，最终会由 Mix 来编译成 CSS。
resources/assets/sass/app.scss
@import "variables";
// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
// 通用样式
body {
font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial,sans-serif;
}
/* 顶部导航 */
.navbar-static-top {
border-color: #e7e7e7;
background-color: #fff;
box-shadow: 0px 1px 11px 2px rgba(42, 42, 42, 0.1);
border-top: 4px solid #00b5ad;
margin-bottom: 40px;
margin-top: 0px;
}
/* 底部样式 */
html {
position: relative;
min-height: 100% ;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100% ;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #000;
.container {
padding-right: 15px;
padding-left: 15px;
p {
margin: 19px 0;
color: #c1c1c1;
a {
color: inherit;
}
}
}
}再到浏览器中刷新页面看看效果：
至此，我们完成了基础页面结构的构建。
Git 代码版本控制
在加入版本库之前我们先执行 git status 看看新增了哪些文件：
可以看到 Mix 还生成了 public/fonts 和 public/mix-manifest.json，这也是不需要加入版本库的，在 .gitignore 中添加这两项：
.gitignore
.
.
.
/public/fonts
/public/mix-manifest.json再次执行 git status 看看我们的变更是否生效：
确认没有问题，现在让我们将这些文件加入到版本控制中：
$ git add -A
$ git commit -m "基础布局"上面是一系列操作，主要就是将前端的页面框架布局出来。也没有什么特别难的，按着操作就好，不懂的先记下来，
原文地址：https://www.cnblogs.com/hqr0597/p/10658121.html