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

Question

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

1. 索引.html
2. 应用程序.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. 莫敏的建议：

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

   npm install bootstrap jquery popper.js

   将此添加到顶部main.js:

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

标签： javascripthtmlvue.jsbootstrap-4

Answer 1

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