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. 测试预览

Vue 3 + Vite 如何使用Bootstrap 5
按钮样式已加载,导入成功.

版权声明:本文为NII.CN的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://nii.cn/4142.html 发布者:nii

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-10-13 21:37
下一篇 2022-10-19 17:10

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

邮件:83390286[AT]QQ.COM

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信