javascript 如何在vue中使用bootstrap而不是tailwind CSS？js welcome组件

ny6fqffe 于 2023-04-28 发布在 Java

关注(0)|答案(4)|浏览(145)

我安装了jetstream+ initiation。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';

JavaScript

来源：https://stackoverflow.com/questions/66494398/how-can-i-use-bootstrap-instead-of-tailwind-css-in-vue-js-welcome-component

4条答案

按热度按时间

r1zhe5dt1#

一个可能的解决方案是同时使用两个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类与前缀，但它会工作。

赞(0）回复(0）举报 2023-04-28

des4xlb02#

有一个为这个https://github.com/nascent-africa/jetstrap制作的包
它允许您在Bootstrap，Tailwind和其他UI套件之间切换。

赞(0）回复(0）举报 2023-04-28

deyfvvtc3#

你有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/

赞(0）回复(0）举报 2023-04-28

6tr1vspr4#

虽然Laravel 8默认带有Tailwind，但我们仍然可以为我们的应用程序使用bootstrap或类似的CSS框架。
导航到项目文件夹，安装最新版本的laravel/ui包

composer require laravel/ui

然后安装Bootstrap：

php artisan ui bootstrap

执行以下命令，使用Bootstrap安装auth scaffoldings：

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>

希望这对你有用！！

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 如何在vue中使用bootstrap而不是tailwind CSS？js welcome组件

4条答案

相关问题

热门标签

最新问答