Vue中引入bootstrap框架

ops/2025/3/1 10:10:36/

方式一：CDN引入:

所谓cdn引入，本人理解是在当前界面中引用远程服务器中的bootstrap文件夹中的css/js文件，那么在第一次加载的时候会非常慢，因为它依赖于网络速度去下载文件，然而第二次运行界面的时候加载非常的快，即使是断网也可以引用，这说明从远程服务器中只需要加载一次bootstrap的文件即可使用。

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><title>Bootstrap引入</title></head><body><h1>HelloWorld!</h1><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script></body>
</html>

引入前样式：

引入后样式：

方式二：本地引入：

本地引入也是分为两种方式：

1.main.js中实现引用:

npm install bootstrap

下载完成后可以在node_modules中查看下载后的bootstrap包：

main.js中代码:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import "element-plus/dist/index.css"import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'const app = createApp(App)app.use(ElementPlus)app.mount('#app')

引用前样式：

引用后样式：

2.在index.html中引入:

1.在bootstrap官网中下载dist文件夹（该过程可能需要魔法上网）:

根据相对路径找到----bootstrap-5.3.0-alpha1-dist\css\bootstrap.min.css和bootstrap.bundle.min.js两个文件，将其复制粘贴到vue3的public中去：

index.html代码:

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="bootstrap.min.css"><title>Bootstrap引入</title></head><body><h1>HelloWorld!</h1><div id="app"></div><script src="bootstrap.bundle.min.js"></script></body>
</html>

引用样式前：

引用样式后：

3.index.html中错误引用示例:

本人想着已经npm install bootstrap包了，直接在index.html中引用，发现也能进行索引读取：

index.html代码：

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"><title>Bootstrap引入</title></head><body><h1>HelloWorld!</h1><div id="app"></div><script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script></body>
</html>

引入样式失败: