时间戳

首页 > 解决方案 > 如何使用 vue-router 将 Bootstrap 安装到这个 Vue.js 项目中？

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

问题描述

我有一个正在构建的 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 正常工作？

标签： vue.jsvue-routervuejs3bootstrap-vuebootstrap-5

解决方案

您可以通过在“index.html”中的头块中链接 bootstrap css 来使用 bootstrap，该文件位于项目的根目录中。

并确保“bootstrap.min.css”文件位于静态文件夹中

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

推荐阅读