做网站用 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