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