怎么在Laravel9.x中快速安装Bootstrap

这篇文章主要介绍“怎么在Laravel9.x中快速安装Bootstrap”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么在Laravel9.x中快速安装Bootstrap”文章能帮助大家解决问题。

成都创新互联自2013年起,是专业互联网技术服务公司,拥有项目成都网站建设、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元巨野做网站,已为上家服务,为巨野各地企业和个人服务,联系电话:18980820575

开发环境:

  • 大环境上是 Windows 10/11 + Homestead,均为最新稳定版本

  • 两个平台都安装 Node.js

  • Laravel 版本为 9.x(发文时我用的是最新的 9.38.0) ,其他未提及的按照 9.x 版本的教程来

  • 不使用 Laravel Mix,使用官方推荐的新前端打包工具 vite 完成教程里关于样式的修改任务。

操作方法

首先我们根据教程做到下方这一步,但先别执行

composer require laravel/ui:3.4.5 --dev

我们改改,这里直接获取默认的最新 laravel/ui 版本,并在 linux 内执行

composer require laravel/ui  // 发文时最新的版本是 4.0.1,对不住了版主,我自己偷摸的上到最新的版本惹
php artisan ui bootstrap

然后我们到 windows 环境下开一个终端,比如 powershell,并执行

npm config set registry=https://registry.npm.taobao.org
npm i

然后回到你的编辑器,找到项目根目录下刚生成的 vite.coffig.js 我们修改成如下的效果

import { 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'),
       }
   },
});

然后在 app.js 中导入 boostrap 5 的 scss

import './bootstrap';

// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'

之后再去项目的 blade 模板中,更换原本的 mix () 代码。这里的话要是根据教程来,我们只改那个 default.blade.php 文件即可,即将其中的这两行代码


全部换成 @vite 代码

@vite(['resources/js/app.js'])

下面是我在 default.blade.php 放的位置




    @yield('title', 'Weibo App') - Laravel 入门教程
    @vite(['resources/js/app.js'])   <--- here!


    
        
            Weibo App
            
                帮助
                登录
            
        
                  @yield('content')     

最后,在 windows 终端输入如下指令

npm run build
// 或者
npm run dev

操作结束,刷新以下浏览器就可看到效果。

至于 dev 和 build 的区分就是:

速度方面,相比较 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.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log
/.idea
/.vscode

关于“怎么在Laravel9.x中快速安装Bootstrap”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


分享名称:怎么在Laravel9.x中快速安装Bootstrap
网站URL:http://azwzsj.com/article/jshiog.html

其他资讯