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/, '')
// }
}*/
};