如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS答案

【问题标题】：how can I use bootstrap instead of tailwind CSS in vue.js welcome component如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS
【发布时间】：2021-06-04 05:50:38
【问题描述】：

我将 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';

【问题讨论】：

是否需要Bootstrap v5？还是 v4 可以工作？
@Andrew bootstrap v5

标签： javascript laravel laravel-mix inertiajs jetstream

【解决方案1】：

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

npm i bootstrap-vue

如果你真的需要 Bootstrap 5，你可以这样做

npm install bootstrap@next

或者通过CDN导入

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

【讨论】：

阅读您自己的问题。 “引导而不是顺风 CSS”。而且我没有说要删除tailwindcss。您可以一起使用它们。
你现在有什么问题不能一起使用？
顺风 CSS 和引导程序是重叠的。我正在使用 Jetstream 和 Jetstream 来帮助应用程序的登录、注册、电子邮件验证、两因素身份验证、会话管理、通过 Laravel Sanctum 的 API，所以 Laravel Jetstream 使用 tailwind CSS 作为前端，我只想在我的 Welcome 中使用 bootstrap .vue 组件。希望你能理解。
Jetstream 是为与 Tailwind 一起使用而构建的。如果你想删除它，你应该重建所有视图以引导。将 Tailwind css 和 bootstrap 结合起来并不是一个好主意，但它会起作用。
让我们continue this discussion in chat.

【解决方案2】：

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

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

【讨论】：

谢谢，但我想在 Jetstream 中使用顺风 Css。

【解决方案3】：

一个潜在的解决方案是同时使用这两个 css 框架。

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

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

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

您将需要做一些工作来更新带有前缀的现有 Tailwind 类，但它会起作用。

【讨论】：

以下在线工具可以将前缀应用于 Tailwind 类 github.vue.tailwind-prefix.cbass.dev 。您必须复制/粘贴每个文件，但这比手动添加前缀要好。

【解决方案4】：

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

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

composer require laravel/ui

然后安装 Bootstrap：

php artisan ui bootstrap

执行以下命令以使用 Bootstrap 安装 auth 脚手架：

php artisan ui bootstrap --auth

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

 npm install

 #development
 npm run dev 

 #production
 npm run production

上述命令将resources/js和resources/sass文件夹中的CSS和JavaScript文件编译到公用文件夹中。

自动化 sass 和 js 更改：

 npm run watch

现在我们可以定义 js 和 css 路径并在刀片中使用 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>

希望这对你有用！！

【讨论】：

这很好地展示了安装引导程序，但 OP 提到他们特别需要引导程序 v5。 laravel/ui 带有 Bootrap v4。他们还希望同时使用 Tailwind 和 Bootstrap（在其应用程序的不同部分 - Bootsrap v5 特别是在 welcome.vue 组件和 Tailwind 其他地方），我认为您的解决方案是针对使用一个或另一个（或者会有 b 重叠类名）。
我会对bootstrap 5进行修改，感谢指出问题。
我同意 Andrew，很遗憾这不是解决方案，我只想在 Welcome.vue 组件中使用引导程序。