1.安装依赖包：
cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev
2.将bootstrap全局引入。
在项目中根目录西main.js中添加如下代码：
import 'bootstrap'
引入jquery同理,可在main.js添加下面一行：
import 'jquery'
3.将bootstrap css资源引入到相关页面中。
和普通的html直接link css文件资源不同，对于基于组件化的vue项目，我们需要在相关需要使用的vue文件中添加如下代码：
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>
如果Home.vue为Article.vue的父组件，那么想css作用于Article.vue,只需要在Home.vue添加上述两行import即可。
但是，上面的并不好用
网页头部添加 <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
body尾部添加
<script type="text/javascript" src="./bootstrap/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.bundle.js" ></script>
vue中引入bootstrap
/*
* @Author: your name
* @Date: 2021-11-09 15:15:46
* @LastEditTime: 2021-11-10 15:32:28
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \qlzy\vite.config.js
*/
const path = require("path");
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, "./src"));
module.exports = {
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: "./",
/**
* 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
* @default 'dist'
*/
publicPath: "./",
outDir: "dist",
port: 3000,
// 是否自动在浏览器打开
open: true,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
/*// 引入第三方的配置
optimizeDeps: {
include: ["moment", "echarts", "axios", "mockjs"]
},*/
alias: {
// 键必须以斜线开始和结束
"/@/": path.resolve(__dirname, "./src"),
// '/@components/': path.resolve(__dirname, './src/components')
},
/*proxy: {
// 如果是 /lsbdb 打头，则访问地址如下
'/lsbdb': 'http://10.192.195.96:8087',
// 如果是 /lsbdb 打头，则访问地址如下
// '/lsbdb': {
// target: 'http://10.192.195.96:8087/',
// changeOrigin: true,
// // rewrite: path => path.replace(/^\/lsbdb/, '')
// }
}*/
};