nuxt3使用bootstrap

Nuxt.js 3.x版本中集成Bootstrap需要一些步骤，因为Nuxt 3已经弃用了传统的`vue-meta`配置，而是引入了更现代的`nuxt-i18n`, `@nuxtjs/router`等模块。以下是使用Bootstrap的基本流程：

1. 安装依赖：首先，在项目根目录运行以下命令安装Bootstrap和相关的CSS库：

   npm install bootstrap @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome --save

2. 引入Bootstrap CSS和Font Awesome（如果需要图标）：
在`nuxt.config.ts`文件的`build`部分添加CSS提取器，并导入Bootstrap和Font Awesome样式：

   import { defineConfig } from 'nuxt3'
   import { createApp } from '@nuxtjs/app-builder'

   export default defineConfig({
     build: {
       css: ['~bootstrap/dist/css/bootstrap.min.css', '~@fortawesome/fontawesome-free/css/all.min.css']
     },
   })

3. 如果需要在模板中使用Bootstrap组件，可以使用`<BootstrapVue>`标签，例如：

   <template>
     <div class="container">
       <BootstrapVue>...</BootstrapVue>
     </div>
   </template>

或者通过`import { BButton } from 'bootstrap-vue'`然后使用自定义的组件。

4. 需要注意的是，BootstrapVue是一个基于Bootstrap的Vue组件库，它可以帮助你更好地将Bootstrap与Vue结合。如果你只想使用纯HTML/CSS，那么直接引用Bootstrap即可。