如何在Vue组件中使用Bootstrap？

我在这2个地方放了相同的html（使用Bootstrap 4.5.2）。

1. index.html
2. 查看应用

在index.html中，Bootstrap样式有效。在App.vue中，按钮之间的间隔失败。我通过mr-1在按钮上添加类来解决此问题。将其放入组件时，如何避免必须修理普通的Bootstrap？

我尝试过的（结果相同）

1. 将官方的BootstrapCDN代码添加到 index.html

2. 添加到此main.js并安装模块

   import jQuery from "jquery";
   global.jQuery = jQuery;
   let Bootstrap = require("bootstrap");
   import "bootstrap/dist/css/bootstrap.css";
   

3. 在<style>App.vue部分中添加了此内容

   @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
   

4. Momin的建议：

   将所有内容安装在项目文件夹目录中

   npm install bootstrap jquery popper.js

   将此添加到 main.js:

   import 'bootstrap'
   import 'bootstrap/dist/css/bootstrap.min.css'