在vue3中安裝使用bootstrap過程
更新時間：2023年10月26日 09:28:29 作者：小楊闖關(guān)之情迷代碼
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、安裝
在 vue 項目中引入 bootstrap，首先要引入依賴：jQuery 和 popper
筆者這里采用cnpm安裝：
cnpm install jquery --save-dev cnpm install @popperjs/core --save-dev cnpm install bootstrap --save-dev
安裝成功后：
// package.json
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@popperjs/core": "^2.11.6",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"bootstrap": "^5.2.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
二、引入
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
注意： 只有這兩行代碼 ，不需要全局注冊 $ 等語句
三、配置 jQuery
在 vue.config.js 中，寫如下代碼（如果沒有 vue.config.js ，則在 package.json 同級目錄下手動新建）
// defineConfig 這里是vue3 的默認(rèn)代碼
const { defineConfig } = require('@vue/cli-service')
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']
})
]
}
})
四、使用插件
<div class="hello">
<button type="button" class="btn btn-primary">Primary</button>
</div>
成功使用！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文將探討 Vue 版本升級后常見的不兼容問題,并提供相應(yīng)的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue學(xué)習(xí)筆記進階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進階篇之vue-cli安裝及介紹，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Antd form表單的使用、設(shè)值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設(shè)值、取值、清空值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
寫代碼的過程中一定會遇到報錯,遇到報錯不要擔(dān)心,認(rèn)真分析就可以解決報錯,同時積累經(jīng)驗,早日成為大牛,這篇文章主要給大家介紹了關(guān)于Vue常見報錯整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進行了優(yōu)化，下面我們一起進入文章看看具體詳情吧2021-10-10
vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細(xì)的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-07-07