bootstrap在vue中如何使用？

可以的，Bootstrap仍然可以与Vue.js一起使用。有几种方法可以在Vue项目中使用Bootstrap。

CDN：在你的 public/index.html 文件中添加Bootstrap的CDN链接。这是最简单的方式，你不需要安装任何额外的依赖，但是你不能使用基于模块的Bootstrap组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <!-- Add Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- Add jQuery and Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

NPM：你可以通过npm安装bootstrap，并在你的项目中导入它。这种方法让你能够只引入你需要的部分，而不是整个Bootstrap库。

首先，在你的项目目录中运行以下命令来安装Bootstrap：

npm install bootstrap

然后，在你的 main.js 文件中添加以下行来导入Bootstrap CSS 和 JS：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

Vue Bootstrap：还有一个库叫做BootstrapVue，它将Bootstrap的每个组件都转换成了Vue组件。这使得你能够在Vue项目中更自然地使用Bootstrap。首先，你需要安装它：

npm install bootstrap-vue

然后，在你的 main.js 文件中添加以下行来导入BootstrapVue和Bootstrap CSS：

import {
    
     BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

现在你可以在你的Vue组件中使用BootstrapVue的组件了。

以上是几种在Vue.js项目中使用Bootstrap的方式，你可以根据你的需求选择最合适的一种。

bootstrap在vue中如何使用？

猜你喜欢