如何使用 vue-router 将 Bootstrap 安装到这个 Vue.js 项目中？

Question

我正在按照教程构建一个 Vue 项目。这个项目使用 Vue Router，我正在尝试使用 Bootstrap。这是当前布局：

main.js

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

createApp(App).use(router).mount('#app')

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

我尝试更改 Main.js 中的以下内容以初始化 Bootstrap:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue} from 'bootstrap-vue'

createApp(App).use(router, BootstrapVue).mount('#app')

我收到警告：“在 'vue' 中找不到导出 'default'（重新导出为 'Vue'）”。我需要做什么才能获得 BootStrap工作？

Answer 1

您可以通过链接 bootstrap css 中的 head 块来使用 bootstrap 'index.html' 哪个文件位于项目的根目录中。

并确保 'bootstrap.min.css' 文件位于 static 文件夹

<link rel="stylesheet" href="/static/bootstrap.min.css" />

如何使用 vue-router 将 Bootstrap 安装到这个 Vue.js 项目中？

How can I install Bootstrap into this Vue.js project using vue-router?

vue.js

vue-router

bootstrap-vue

vuejs3

bootstrap-5