Javascript 如何在vue.js欢迎组件中使用引导而不是尾风CSS_Javascript_Laravel_Laravel Mix_Inertiajs_Jetstream

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

javascript laravel

Javascript 如何在vue.js欢迎组件中使用引导而不是尾风CSS,javascript,laravel,laravel-mix,inertiajs,jetstream,Javascript,Laravel,Laravel Mix,Inertiajs,Jetstream,我在我的laravel项目中安装了jetstream+inertia.js，一切都很好，但我只需要在欢迎中使用Bootstrap5。vue组件，那么我如何处理它我的app.js文件 require('./bootstrap'); // Import modules... import {createApp, h} from 'vue'; import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-v

我在我的laravel项目中安装了jetstream+inertia.js，一切都很好，但我只需要在

欢迎中使用Bootstrap5。vue

组件，那么我如何处理它

我的

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

您有，但它仍然是引导4（他们正在迁移到B5）

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

npm install bootstrap@next

或者通过CDN导入

有一个专门为此设计的软件包

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

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

您可以使用

npm安装导入和使用引导程序5bootstrap@next

（此处有更多详细信息：）

然后，为了避免类名冲突，您可以为您的Tailwind类设置前缀；在

tailwind.config.js

中，您可以通过设置prefix选项来添加

tw-

前缀（此处有更多详细信息：）：

您将需要使用前缀更新现有的Tailwind类，但它会起作用。

尽管默认情况下Laravel 8带有Tailwind，但我们仍然可以为我们的应用程序使用引导或类似的CSS框架

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

laravel/ui

软件包

composer require laravel/ui

然后安装引导程序：

php artisan ui bootstrap
执行以下命令以使用引导安装auth脚手架：

php artisan ui bootstrap --auth
然后从npm安装引导程序包及其依赖项：

npm install #development npm run dev #production npm run production
上面的命令将CSS和JavaScript文件从
resources/js
和
resources/sass
文件夹编译到公用文件夹
自动化sass和js更改：

npm run watch
现在我们可以定义js和css路径，并在blade模板中使用引导：

<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <title>{{ config('app.name', 'Laravel') }}</title>  <script src="{{ asset('js/app.js') }}" defer></script>  <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <h1>Tutorial made by Positronx.io</h1> </body> </html>

{{config（'app.name'，'Laravel'）} Positronx.io制作的教程

希望这对你有用
它需要是引导v5吗？“或者v4会工作吗？”Andrew bootstrap V5阅读您自己的问题。“引导而非顺风CSS”。我并没有说要删除tailwindcss。你们可以同时使用它们。你们现在面临什么问题不能同时使用它们呢？顺风CSS和引导是重叠的。我使用Jetstream和Jetstream通过Laravel Sanctum帮助应用程序登录、注册、电子邮件验证、双因素身份验证、会话管理和API，因此Laravel Jetstream在前端使用tailwind CSS，我只想在Welcome.vue组件中使用bootstrap。我希望你能理解。Jetstream是为配合顺风而设计的。如果你想删除它，你应该重建所有的视图来引导。将Tailwind css和bootstrap结合起来不是一个好主意，但它会起作用。让我们一起来。谢谢，但我想在Jetstream中使用Tailwind css。这很好地展示了如何安装bootstrap，但OP提到，他们特别需要bootstrap v5
laravel/ui
随Bootrap v4提供。他们还想同时使用Tailwind和Bootstrap（在应用程序的不同部分-Bootsrap v5，特别是在
welcome.vue
组件和Tailwind的其他地方），我认为您的解决方案是针对使用一个或另一个（或者会有b个重叠的类名）。我将对Bootstrap 5进行修改，谢谢你指出这个问题。我同意Andrew的观点，不幸的是这不是一个解决方案，我只想在Welcome.vue组件中使用bootstrap。以下在线工具可以将prefix应用于Tailwind类。您必须复制/粘贴每个文件，但这比手动添加前缀要好。
npm run watch

<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <title>{{ config('app.name', 'Laravel') }}</title>  <script src="{{ asset('js/app.js') }}" defer></script>  <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <h1>Tutorial made by Positronx.io</h1> </body> </html>