创建laravel 12项目

最新推荐文章于 2025-05-14 23:24:11 发布

andux

最新推荐文章于 2025-05-14 23:24:11 发布

阅读量1k

点赞数 8

分类专栏： laravel 文章标签： laravel php

本文链接：https://blog.csdn.net/andux/article/details/147551772

版权

laravel 专栏收录该内容

3 篇文章

订阅专栏

首先是下载herd，官网是：https://herd.laravel.com/windows，就是laravel官网发布的软件，pro一年费用99美元，功能如下：

之前使用过learnku推荐的homestead，后来使用wmapserver，后来发现安装php8.4有点麻烦，使用herd反而是最简单的，而且，herd免费版本还提供ssl，这个体验比较好，自己安装openssl，浏览器还是会有红色提醒，体验不好。

打开 open sites，一个新的窗口，就可以创建新项目了，点两下就建好了一个最新版本的laravel项目了，目前最新的是laravel 12.10.2

建好laravel12项目，使用vscode打开，先设置好时区，.env中：

APP_LOCALE=zh_CN
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=zh_tw

生成模拟数据，选择tw，这样fakerphp/faker生成段落，会是繁体中文的内容，还有一个在config/app.php里，设置时区：

    'timezone' => 'PRC',

这样时间跟本地电脑的时间就是一样的，不然就是比本地电脑的时间早8个小时。

我准备使用的是layui作为前端显示UI框架，需要把相关的layui下载下来，放到resources文件夹里：

在css/app.css里面引入css样式，

@import "../res/layui/css/layui.css";
@import "../res/adminui/dist/css/admin.css";

.ws-footer {
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color: #777;
}

在js/aap.js里面引入css样式，这样在模板页就只需要引入js就可以了。

import '../css/app.css';

layui需要在具体页面里执行js代码，加载layui的相关资源，所以在js/app.js里引入layui.js，似乎不起作用，我的作法是在具体页面直接引入public里面的相关layui资源，放在resources文件夹里，是为了vite压缩，所以在部署的时候，需要执行npm run build，这一步可以把resources里面的res资源拷贝到public/build文件夹里，需要做到这样的拷贝，需要安装一个npm开发依赖包，vite-plugin-static-copy：

npm i vite-plugin-static-copy -D

因为只有开发的时候才会用到拷贝资源到public/build文件夹。除了安装这个依赖包，还需要在vite.config.js配置文件里配置一下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        viteStaticCopy({
            targets: [
                {
                    src: 'resources/res/*',
                    dest: 'res',
                },
            ],
        })
    ],
});

需要在本地或者服务器执行一次npm run build，这样才会拷贝res到public/build文件夹，最后就是在模板也引入js了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{$title ?? 'All'}} - Star</title>
  @vite('resources/js/app.js')
  <script src="/build/res/layui/layui.js"></script>
</head>
<body>
  <x-app.nav />
  <div class="layui-container">
    {{ $slot }}
  </div>
  <x-app.footer />
</body>
</html>

我设定的首页在views目录下的app/app.blade.php，模板及页头页脚放在views/components/app/文件夹下，通用模块放在components/common文件夹下。准备把各种链接、按钮都模块化，比如链接的通用模块：

common/a.blade.php

<a href="{{ $url }}" target="{{ $blank ?? '' ? '_blank':'' }}" style="color: {{ $color ?? '' }};font-weight:{{$bold ?? '' ? 'bold':''}};">{{ $title ?? '' }}</a>

common/nav-dd-a.blade.php

<dd>
  <a href="{{ route($route) }}"><i class="layui-icon layui-icon-{{ $icon ?? '' }}" style="margin-right: 10px;"></i> {{ $title }}</a>
</dd>

common/nav-li-a.blade.php

<li class="layui-nav-item {{ $showxs ?? "layui-hide-xs" }} {{ request()->is($name) ? "layui-this" : "" }}">
  <a href="{{ route($route) }}">{{ $title }}<span class="{{ $showdot ?? '' ? 'layui-badge-dot' : 'layui-hide' }}"></span></a>
</li>

这样尽可能的把所有的链接都模块化，在更上一层的模块里，比如页头导航栏，或者页脚的footer里，就减少了重复出来的样式等代码了，只要有重复的地方，就尽可能的模块化，减少重复。

nav.blade.php

<div class="layui-nav">
  <div class="layui-container">
    <ul class="layui-nav layui-nav-left">
      <x-common.nav-li-a :title="'首页'" :route="'home'" :name="'/'" :showxs="true" />
      <x-common.nav-li-a :title="'说说'" :route="'shuo'" :name="'shuo'" :showxs="true" />
      <x-common.nav-li-a :title="'时间线'" :route="'timeline'" :name="'timeline'" :showdot=" 'Auth::user()'" />
    </ul>
    <ul class="layui-nav layui-layout-right">
      @if(Auth::check())
      <x-common.nav-li-a :title="'用户列表'" :route="'user.index'" :name="'user*'" :showdot="true" />
      <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;">
          <img src="{{ Auth::user()->gravatar() }}" class="layui-nav-img">
        </a>
        <dl class="layui-nav-child">
          <x-common.nav-dd-a :title="'个人中心'" :icon="'username'" :route="'user.show'" />
          <hr />
          <x-common.nav-dd-a :title="'设置'" :icon="'set'" :route="'user.edit'" />
          <hr />
          <x-common.nav-dd-a :title="'退出'" :icon="'logout'" :route="'user.logout'" />
        </dl>
      </li>
      @else
      <x-common.nav-li-a :title="'注册'" :route="'reg'" :name="'reg'" :showxs="true" />
      <x-common.nav-li-a :title="'登录'" :route="'login'" :name="'login'" :showxs="true" />
      @endif
    </ul>
  </div>
</div>

footer.blade.php

<div class="ws-footer layui-container">
  <p>
    Copyright © 2025
    <x-common.a :url="'/'" :title="'行天下'" />
  </p>
  <p id="LAY-footer-info">
    <x-common.a  :url="'https://layui.dev/docs/2/'" :blank="true" :title="'layui'" />
    <x-common.a :url="'https://dev.layuion.com/'" :blank="true" :title="'静态主题'"/>
  </p>
  <p>
    鸣谢：
    <x-common.a :url="'https://layui.dev/docs/2/'" :blank="true" :color="'#23A7E8'" :title="'又拍云'" :bold="true" />
    <x-common.a :url="'https://gitee.com/'" :blank="true" :color="'#C71D23'" :title="'Gitee'" :bold="true" />
    <x-common.a :url="'https://www.iconfont.cn'" :blank="true" :color="'#9B16FF'" :title="'iconfont'" :bold="true" />
  </p>
</div>

界面大概就是下面这样：