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

Posted 2023-02-22

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

【英文标题】：How can I install Bootstrap into this Vue.js project using vue-router?

【发布时间】：2021-07-31 18:22:52

【问题描述】：

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

ma​​in.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 正常工作？

【问题讨论】：

这能回答你的问题吗？ "export 'default' (imported as 'Vue') was not found in 'vue'

@Hiws 可能，我看到了这个，但认为它现在与 Vue 3 兼容？有没有办法降级 Vue 版本，因为 Bootstrap 对我的项目有很大帮助？

BootstrapVue 尚不兼容 Vue 3，您可以跟踪进度here。如果你想使用 BootstrapVue，你必须降级到 Vue 2，我不知道在现有项目中这是否可行。但如果它是一个相对较新的项目，您可以简单地创建一个新项目并复制您的代码。如果您想坚持使用 Vue 3，则必须使用基本 Bootstrap，这可能需要一些额外的工作。

【参考方案1】：

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

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

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