当前位置：首页 > news >正文

创建laravel 12项目

news 来源：原创 2025/4/29 6:29:02

首先是下载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>

界面大概就是下面这样：