解決方案

1、安裝jQuery、 Bootstrap、popper.js依賴

npm install jquery --save npm install bootstrap --save npm install popper.js --save

2、配置 main.js?

//main.jsimport Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; //在這里引入 bootstrap。默認只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的 import "bootstrap"; //也可以在這里引入 bootstrap.css ; //import "bootstrap/dist/css/bootstrap.css";Vue.config.productionTip = false;new Vue({router: router,store: store,render: h => h(App) }).$mount("#app");

只是引入 bootstrap.css，代碼參考：?

<style> // 因為我的 bootstrap 文件經過了我自己的調整，所以單獨放在 assets 文件夾中做單獨引入。 //如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。 @import "./assets/css/bootstrap.css"; </style>

?3、示例

<template> <div class="container"><div class="row"><div class="col-md-6"><button class="btn btn-primary">測試按鈕</button></div></div> </div> </template>

Vue UI 安裝

https://blog.csdn.net/qq_43719932/article/details/97369140?

參考文章

https://blog.csdn.net/weixin_34258838/article/details/88621425

https://blog.csdn.net/qq_43719932/article/details/97369140

https://www.cnblogs.com/ysx215/p/10573625.html

總結

以上是生活随笔為你收集整理的Vue 4.0——Vue与Bootstrap整合解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。