如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS
Posted
技术标签:
【中文标题】如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS【英文标题】：how can I use bootstrap instead of tailwind CSS in vue.js welcome component 【发布时间】：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 【参考方案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 组件中使用引导程序。以上是关于如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS的主要内容，如果未能解决你的问题，请参考以下文章
在 vue js 中使用 v-for 在 div 内创建组件