Vue 4.0——Vue與Bootstrap整合解決方案

解決方案

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

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

2、配置 main.js 

//main.js
 
import 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