在vue3中安裝使用bootstrap過程
更新時(shí)間：2023年10月26日 09:28:29 作者：小楊闖關(guān)之情迷代碼
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、安裝
在 vue 項(xiàng)目中引入 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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue項(xiàng)目中使用rimraf?dev啟動時(shí)刪除dist目錄方式
這篇文章主要介紹了vue項(xiàng)目中使用rimraf?dev啟動時(shí)刪除dist目錄方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個(gè)常用指令,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue封裝自定義分頁器組件與使用方法的相關(guān)資料,非常的好用,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉(zhuǎn)路由,路由組件會渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue獲取驗(yàn)證碼倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
element-ui下拉輸入框+resetFields無法回顯的問題解決
本文主要介紹了在使用Element?UI的下拉輸入框時(shí),點(diǎn)擊重置按鈕后輸入框無法回顯數(shù)據(jù)的問題,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
這篇文章主要介紹了vue3+TS reactive設(shè)定類型方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本文詳細(xì)解析了Vue中的v-model和:value兩種綁定方式的區(qū)別、使用場景以及最佳實(shí)踐,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,感興趣的朋友一起看看吧2026-01-01