Write the Code. Change the World.

2月 18

做网站用 php,做自适应网站用 bootstrap。很早的时候,这是一个不错的组合。喜欢 laravel,那么现在用 laravel10 + bootstrap5 + vue 就不错。

创建一个 laravel 项目

laravel10 release 版本已经发布,可以这样创建

composer create-project laravel/laravel xxx10 --prefer-dist

### 查看当前版本(当前显示 10.0.3)
cd xxx10
php artisan --version

# git 初始化,方便版本管理
git init
git add .
git commit -m 'laravel initialize 10.0.3'

修改配置

这里我 homestead 配置的域名是 xr.com,数据库名是 xr

.env

vim .env
# 修改 APP_URL 以及数据库配置
APP_URL=http://xr.com
DB_DATABASE=xr
DB_USERNAME=homestead
DB_PASSWORD=secret

config/app.php

vim config/app.php

# 修改以下内容
'timezone' => 'Asia/Shanghai',
'locale' => 'zh-CN',
'faker_locale' => 'zh_CN',

添加辅助函数

加辅助函数集,用来安放无副作用的函数。增加到 app 下。

vim app/helpers.php

# 增加一个辅助测试函数
<?php 

    function test($str = 'world') {
        return 'Hello ' . $str;
    }

# 将该文件增加到 composer 的自动加载配置中。 autoload->files 就是需要 composer 自动帮我们加载的函数库(不含类)

vim composer.json

    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        },
        "files": [
           "app/helpers.php" 
        ]
    },

# 然后 dump (这一步是不可少的)
composer dump-autoload

加好了之后,就可以来尝试一下了。这里打开 tinker 来试试。

php artisan tinker;

test();

test('bird')

最后,提交代码。

git  add .
git commit -m '修改基础配置以及创建辅助函数集'

安装 ui 包

composer require laravel/ui

php artisan ui bootstrap --auth

# 现在前端就用 pnpm + vite 组合
pnpm install 

pnpm run dev

如果报 System limit for number of file watchers reached 错误,请看 https://blog.vini123.com/837

这样就 ok 了。 注意看 resources/views/layouts/app.blade.php。如果站点效果都统一,可以其他页面都继承该模板。blade 模板真的很好用啊,可以继承,可以重写,可以插槽。

跟随时代的潮流,用上 vite 来构建前端项目。之前,laravel9 就开始使用 vite 来构建了。

因为是自己构建的,所以可以定义一些 bootstrap 的一些特征。比如 primary 的颜色。这样就很爽。

# resources/sass/_variables.scss 中,在尾部追加下边的代码(这样你的 primary 色就是红色了 。),当然还有更多的定义。

$primary: #f00;

https://v5.bootcss.com/docs/customize/color/

https://www.runoob.com/bootstrap5/bootstrap5-colors.html

相关

vite 中文文档 https://cn.vitejs.dev/guide/

bootstrap5 中文文档:https://v5.bootcss.com/docs/getting-started/introduction/

bootstrap5 教程 https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html