[英]how can I use bootstrap instead of tailwind CSS in vue.js welcome component
我將 jetstream+inertia.js 安裝到我的 laravel 項目中，一切正常，但我只需要使用 bootstrap 5 welcome. vue welcome. 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';
一個潛在的解決方案是同時使用兩個 css 框架。
您可以使用npm install bootstrap@next導入和使用 Bootstrap 5（更多詳細信息： https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/ ）。
然后為避免 class 名稱沖突，您可以為 Tailwind 類設置前綴； 在tailwind.config.js中，您可以通過設置前綴選項添加tw-前綴（更多詳細信息請參見：https://tailwindcss.com/docs/configuration#prefix ）：
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
您將需要做一些工作來更新帶有前綴的現有 Tailwind 類，但它會起作用。
有一個為這個 https 制造的package://github.com/nascent-africa/jetstrap
它允許您在 Bootstrap、Tailwind 和其他 UI 工具包之間切換。
你有Boostrap-vue但它仍然是 Bootstrap 4（他們正在遷移到 B5）
npm i bootstrap-vue
如果你真的需要 Bootstrap 5，你可以這樣做
npm install bootstrap@next
或者通過CDN導入
雖然 Laravel 8 默認帶有 Tailwind，但我們仍然可以為我們的應用程序使用 bootstrap 或類似的 CSS 框架。
導航到項目文件夾並安裝最新版本的laravel/ui package
composer require laravel/ui
然后安裝引導程序：
php artisan ui bootstrap
執行以下命令以使用 Bootstrap安裝 auth 腳手架：
php artisan ui bootstrap --auth
然后從 npm安裝引導程序 package及其依賴項：
npm install
#development
npm run dev
#production
npm run production
上面的命令將resources/js和resources/sass文件夾中的 CSS 和 JavaScript 文件編譯到 public 文件夾。
自動化 sass 和 js 更改：
npm run watch
現在我們可以定義 js 和 css 路徑並在刀片模板中使用引導程序：
<!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 在父組件中更新的子組件中的數據？
[英]How can I use data in the child component that are updated in parent component using Vue.js?
如何在沒有 bootstrap-vue 的情況下在 vue.js 2 中使用 bootstrap 4？
[英]How to use bootstrap 4 in vue.js 2 without bootstrap-vue?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.