Vue 3 + Vite 如何使用Bootstrap 5

1. 首先安装 bootstrap 和 popperjs

#bootstrap 依赖popperjs 必须安装
npm i --save bootstrap @popperjs/core

2. 安装开发依赖 SASS （由于使用scss必须开发环境安装SASS）

npm i --save-dev sass

3. 修改 vite.config.js 文件（增加一个alias映射bootstrap）

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入path
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  mode: 'production',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 增加~bootstrap
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  }
})

4. 在 assets目录中新建 my.scss

// my.scss
@import "~bootstrap/scss/bootstrap";

5. 在src/main.js 中导入 my.scss

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'


// 导入自己的scss文件
import './assets/my.scss'

// 导入所有bootstrapjs
import * as bootstrap from 'bootstrap'


import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const app = createApp(App)

app.use(router)

router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})

router.afterEach(() => {
  NProgress.done()
})

app.mount('#app')

6. 打开src/App.vue 文件, 增加Button 按钮测试bootstrap样式是否加载成功

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <button type="button" @click="open" class="btn btn-success">打开</button>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

7. 测试预览