Vite

Vue 安裝 Bootstrap 5

Vite Vue 利用cdn使用bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
＋        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
    </head>
    <body>
＋        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>

＋       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

＋<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.min.js" integrity="sha384-VQqxDN0EQCkWoxt/0vsQvZswzTHUVOImccYmSyhJTp7kGtPed0Qcx8rK9h9YEgx+" crossorigin="anonymous"></script>
    </body>
</html>

Vue npm 安裝 Bootstrap 5

1
npm install --save bootstrap

在src/assets新增scss資料夾 新增all.scss
到node_modules/scss/variables.scss另存到src/assets/scss資料夾
到node_modules/scss/variables-dark.scss另存到src/assets/scss資料夾

1
2
3
4
5
6
7
8
9
10
//all.scss
//基本樣式
+@import "bootstrap/scss/functions";
+@import "./variables";
+@import "./variables-dark";
+@import "bootstrap/scss/bootstrap.scss"; 
//新增以下需要的樣式引入
@import "./public.scss"; 
@import "./nav.scss"; 
@import "./leftSide.scss";

在main.ts引入

1
2
3
4
5
6
7
import { createApp } from 'vue'
import router from './router/router'
import { createPinia } from 'pinia'

import App from './App.vue'
import "bootstrap";
import '@/assets/scss/all.scss';