基础布局

基础布局布局文件统一存放在 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 会自动重新编译

Laravel-shop 前端布局相关推荐

从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
bootstrap 页面垂直居中_前端布局之——水平垂直居中
其他平台文章地址 github: 前端布局之--水平垂直居中 · Issue #3 · yaodebian/bloggithub.com csdn: https://blog.csdn.net/Ya ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
element 前端布局理解经验及好用的属性
经过这两天画前端布局而写的经验页面总览当给出页面需求任务的时候,需要能做到看到页面就把页面先把整体规划好是什么样的布局: 像这个页面使用Container来布局就是一个很常见的Header+Mai ...
web前端布局篇（切图）
web前端布局篇(切图) 这里的切图不是指ps里面的切图,而是指web前端工程师将设计图转化为静态页面的过程. 在布局的时候,我们通常会以设计图为蓝本,然后将设计图拆分,变成一个一个的HTML标签,搭 ...
前端核武器：开源FrontendBlocks所见即所得低代码编辑器让所有人都能做前端布局
项目背景前端开发领域中,最为头疼的就是页面布局,即便是工作经验丰富的老前端程序员,在面对一个新的设计稿时仍旧会有很多需要从头开始敲的布局.那么为什么不让设计师直接来操刀写前端呢? 设计师写前端由于前 ...
Web前端布局实战：三国杀页面布局（上）
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
前端布局flex从入门到入土
前端布局flex从入门到入土作为一个后端,谈不上多会前端,但是一些常见的布局都可以做到,例如flex布局.推荐菜鸟教程的布局:https://www.runoob.com/w3cnote/flex- ...

Laravel-shop 前端布局