这篇文章主要介绍“怎么在Laravel9.x中快速安装Bootstrap”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在Laravel9.x中快速安装Bootstrap”文章能帮助大家解决问题。
这篇文章主要介绍“怎么在Laravel9.x中快速安装Bootstrap”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在Laravel9.x中快速安装Bootstrap”文章能帮助大家解决问题。
开发环境：
大环境上是 windows 10/11 + Homestead，均为最新稳定版本
两个平台都安装 node.js
Laravel 版本为 9.x（发文时我用的是最新的 9.38.0） ，其他未提及的按照 9.x 版本的教程来
操作方法
首先我们根据教程做到下方这一步，但先别执行
我们改改，这里直接获取默认的最新 laravel/ui 版本，并在 linux 内执行 然后我们到 windows 环境下开一个终端，比如 powershell，并执行 然后在 app.js 中导入 boostrap 5 的 sCSS 之后再去项目的 blade 模板中，更换原本的 mix () 代码。这里的话要是根据教程来，我们只改那个 default.blade.php 文件即可，即将其中的这两行代码 全部换成 @vite 代码 下面是我在 default.blade.php 放的位置composer require laravel/ui:3.4.5 --devcomposer require laravel/ui // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹PHP artisan ui bootstrapnpm config set reGIStry=https://registry.npm.taobao.orgnpm iimport { defineConfig } from 'vite';import laravel from 'laravel-vite-plugin';import path from 'path'export default defineConfig({ plugins: [ laravel([ 'resources/js/app.js', ]), ], resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), } },});import './bootstrap';// 以下为新增部分import '../sass/app.scss'import * as bootstrap from 'bootstrap'<link rel="stylesheet" href="{{ mix('css/app.css') }}"><script src="{{ mix('js/app.js') }}"></script>@vite(['resources/js/app.js'])<!DOCTYPE html><html><head> <title>@yield('title', 'Weibo App') - Laravel 入门教程</title> @vite(['resources/js/app.js']) <--- here!</head><body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="/">Weibo App</a> <ul class="navbar-nav justify-content-end"> <li class="nav-item"><a class="nav-link" href="/help">帮助</a></li> <li class="nav-item"><a class="nav-link" href="#">登录</a></li> </ul> </div> </nav> <div class="container"> @yield('content') </div></body></html>
最后，在 windows 终端输入如下指令
操作结束，刷新以下浏览器就可看到效果。npm run build// 或者npm run dev
至于 dev 和 build 的区分就是：
dev 适合开发的时候随时调整，你的修改是实时生效且自动的，建议开发的时候一直开个窗口挂后台就行
build 会一步处理完毕并输出 css 和 js 文件，只会执行一次不会自动，适合最后发布阶段。
速度方面，相比较 laravel Mix 前端工作流，vite 会以闪电般的速度给你稳健的处理好，放心，vite 的处理速度实在是太快惹。
项目部署
当我们的代码上传到远端 git 仓库后，再拉到生产环境时，vite 使用 npm run build 生成的 css 和 js 文件是不会纳入 git 管理的，也就是你在本地 git add -A 是包括不了他俩的，我们需要在本地开发项目的根目录找到.gitignore 文件，注释或者删除 /public/build 这一行，具体如下
/node_modules# /public/build <-- here/public/hot/public/storage/storage/*.key/vendor.env.env.backup.phpunit.result.cacheHomestead.JSONHomestead.yamlauth.jsonnpm-debug.logyarn-error.log/.idea/.vscode
关于“怎么在Laravel9.x中快速安装Bootstrap”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。
--结束END--
本文标题: 怎么在Laravel9.x中快速安装Bootstrap
本文链接: https://www.lsjlt.com/news/345989.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0