基础布局
基础布局布局文件统一存放在 resources/views/layouts 文件夹中，布局涉及的文件如下
- app.blade.php —— 主要布局文件，项目的所有页面都将继承于此页面；
- _header.blade.php —— 布局的头部区域文件，负责顶部导航栏区块；
- _footer.blade.php —— 布局的尾部区域文件，负责底部导航区块；
存放目录位置
resources/views/layout/*
具体代码
主体公共文件
resources/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>
头部公共文件
resources/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>
底部公共文件
resources/views/layouts/_footer.blade.php
<footer class="footer">
<div class="container">
<p class="pull-left">
由 <a href="u/1837553744?is_hot=1" target="_blank">Xxp</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">?</span>
</p>
<p class="pull-right"><a href="mailto:root@leo108.com">联系我们</a></p>
</div>
</footer>
创建控制器
<?php
namespace App\Http\Controllers;
class IndexController extends Controller
{
public function index(){
d(['name'=>'threeBody','age'=>25]);
return view("index.index");
}
}
创建视图
resources/views/index/index.blade.php
@extends('layouts.app')
@section('title', '首页')
@section('content')
<h1>index</h1>
@stop
绑定路由
Route::get('/index', [\App\Http\Controllers\IndexController::class,'index'])->name('index');
运行lararvel-mix
安装yarn
注意：前端要使用npm还是yarn 来实现包管理工具，这里使用yarn来实现，
把之前npm生成的node_modules 和 package.json.lock删除
npm install -g yarn
设置国内镜像
yarn config set registry https://registry.npm.taobao.org
安装依赖
yarn install -no-bin-links
安装cross
yarn add cross-env
运行
npm run dev
//或
npm run watch-poll
npm run watch-poll 动态热部署
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-poll
watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译