快捷導(dǎo)航

vue3全局導(dǎo)入bootstrap5方式

更新時(shí)間：2023年10月26日 09:42:51 作者：賏铘

這篇文章主要介紹了vue3全局導(dǎo)入bootstrap5方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3全局導(dǎo)入bootstrap5

安裝

npm install bootstrap --save-dev
npm install jquery --save-dev

在main.js中引入

// 引入jQuery、bootstrap
import 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

配置 jQuery

vue.config.js 中，寫(xiě)如下代碼

const webpack = require("webpack")
 
module.exports = defineConfig({
  	// 配置插件參數(shù)
	configureWebpack: {
		plugins: [
			// 配置 jQuery 插件的參數(shù)
			new webpack.ProvidePlugin({
				$: 'jquery',
				jQuery: 'jquery',
				'window.jQuery': 'jquery',
				Popper: ['popper.js', 'default']
			})
		]
	}
})

這樣就可以使用啦

vue3全局導(dǎo)入bootstrap-icons問(wèn)題

安裝

npm i bootstrap-icons

在min.js中導(dǎo)入

import "bootstrap-icons/font/bootstrap-icons.css";

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一文詳解WebStorm如何調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用WebStorm進(jìn)行斷點(diǎn)調(diào)試,包括配置、啟動(dòng)本地應(yīng)用程序、設(shè)置斷點(diǎn)以及使用調(diào)試工具等步驟,文中通過(guò)圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
使用?vite?external?減小產(chǎn)物體積的方法實(shí)現(xiàn)
本文主要介紹了使用?vite?external?減小產(chǎn)物體積,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2026-05-05
Nuxt頁(yè)面級(jí)緩存的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt頁(yè)面級(jí)緩存的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue文件代碼縮進(jìn)以及格式化代碼方式[自定義]
這篇文章主要介紹了vue文件代碼縮進(jìn)以及格式化代碼方式[自定義],具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue抽出組件并傳值實(shí)例
這篇文章主要介紹了vue抽出組件并傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡(jiǎn)化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動(dòng)編寫(xiě)和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
vue中的嚴(yán)格模式如何取消
這篇文章主要介紹了vue中的嚴(yán)格模式如何取消，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue.js第四天學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
vue組件tabbar使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue組件tabbar使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
vue中template模板編譯的過(guò)程全面剖析
這篇文章主要介紹了vue中template模板編譯的過(guò)程全面剖析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04