我如何在 vue.js 欢迎组件中使用 bootstrap 而不是 tailwind CSS

Question

我将 jetstream+inertia.js 安装到我的 laravel 项目中，一切正常，但我只需要在 welcome. vue 组件中使用 bootstrap 5，所以我该如何处理是吗？

我的app.js文件；

require('./bootstrap');

// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';



const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
    .use(Toaster)
    .mount(el);

我的 app.css 文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Answer 1

你有 Boostrap-vue 但它仍然是 Bootstrap 4（他们正在迁移到 B5）

npm i bootstrap-vue

如果你真的需要Bootstrap5你可以做

npm install bootstrap@next

或CDN导入

https://getbootstrap.com/docs/5.0/getting-started/download/

Answer 2

有一个为此制作的包 https://github.com/nascent-africa/jetstrap

它允许您在 Bootstrap、Tailwind 和其他 UI 套件之间切换。

Answer 3

一个可能的解决方案是同时使用两个 css 框架。

您可以使用 npm install bootstrap@next 导入和使用 Bootstrap 5（此处有更多详细信息：https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/）。

然后为了避免 class 名称冲突，您可以为您的 Tailwind classes 设置一个前缀；在 tailwind.config.js 中，您可以通过设置前缀选项添加 tw- 前缀（此处有更多详细信息：https://tailwindcss.com/docs/configuration#prefix）：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

您将需要一些工作来更新现有的 Tailwind classes，但它会起作用。

Answer 4

虽然 Laravel 8 默认带有 Tailwind，但我们仍然可以为我们的应用程序使用 bootstrap 或类似的 CSS 框架。

导航到项目文件夹并安装最新版本的laravel/ui包

composer require laravel/ui

然后安装Bootstrap:

php artisan ui bootstrap

执行以下命令 安装身份验证脚手架 和 Bootstrap:

php artisan ui bootstrap --auth

然后 从 npm 安装 bootstrap 包 及其依赖项：

 npm install

 #development
 npm run dev 

 #production
 npm run production

上述命令将 CSS 和 JavaScript 文件从 resources/js 和 resources/sass 文件夹编译到 public 文件夹。

自动化 sass 和 js 更改：

 npm run watch

现在我们可以定义js和css路径，在blade模板中使用bootstrap：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

希望这对你有用！！

我如何在 vue.js 欢迎组件中使用 bootstrap 而不是 tailwind CSS

how can I use bootstrap instead of tailwind CSS in vue.js welcome component

javascript

laravel

laravel-mix

inertiajs

jetstream