javascript - 如何在 Vue 组件中使用 Bootstrap？

Question

我在这两个地方放置了相同的 html(使用 Bootstrap 4.5.2)。

1. index.html
2. App.vue

在 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'
   

Answer 1

如果您需要 Bootstrap，只需使用 BootsrapVue这为你做了繁重的工作。如果您仍然愿意接受其他选择，Vuetifyjs是一个非常好的框架，可以提供很多东西。