Vue3项目里用Bootstrap会不会过时？有什么靠谱的落地方式吗？

最近给团队做新后台选UI框架，前端小伙伴吵得有点凶：有人说Bootstrap是老古董，现在都用Tailwind CSS、Element Plus这些了；有人说Bootstrap文档全、组件熟、上手快，赶项目不香吗？我特意翻了翻今年的前端工具趋势报告，也自己折腾了两个小项目对比了下，今天就聊聊这个争议问题,顺便给个亲测可行的落地思路。

首先得掰扯明白：Vue3里用Bootstrap真的过时吗？

说过时的人，大多有三个理由：UI太“土味通用”、不够Vue原生、性能不如现代CSS-in-JS或者原子化CSS，但这些理由其实都站不住脚——咱们得先搞清楚，Bootstrap不是不能改，也不是完全没适配,更不是性能天花板低。

先看UI这块，现在Bootstrap 5已经发布四年多了，更新到5.3.5版本，早就把默认的直角边框、大蓝按钮改成了更柔和的圆角、半透明渐变，也支持自定义主题色、间距、字体这些，甚至官方出了Bootstrap Studio这种设计工具，一键就能导出符合品牌调性的SCSS变量文件，完全不会再是千篇一律的样子，去年帮朋友做的美食探店小程序后台，就是改了暖橙主题、缩小了默认间距，加上Vue3的响应式组件过渡,UI精致度和现在流行的后台模板差不了多少。

再看适配，很多人还停留在Bootstrap 3配jQuery的时代，其实Bootstrap 5已经完全去掉了jQuery依赖，提供了纯JavaScript的API，还出了专门的Vue3适配库，比如BootstrapVue 3（虽然还在beta，但核心组件已经很稳定），不需要自己去写挂载、卸载的逻辑，用起来和Element Plus一样顺手，都是<b-button>这种组件写法。

最后看性能，Bootstrap 5的核心CSS压缩后只有20多KB，JS只有10多KB，如果按需引入的话，体积会更小——比如只用表格、分页、表单这几个后台常用组件，加起来可能不到10KB，Tailwind CSS虽然用起来爽，但生产环境如果没配置好purge或者tailwindcss-cli的内容筛选，可能会带上几百KB的冗余代码；Element Plus如果直接全量引入，压缩后也有100多KB，小项目或者移动端适配的轻量应用,Bootstrap反而更有优势。

而且最重要的是，工具没有过时一说，只有合适不合适——如果你的项目是赶时间的后台管理、企业官网、简单的B端小工具，团队里大部分人又有Bootstrap基础，用它绝对是性价比最高的选择；如果你的项目是需要极致定制、交互超级复杂的C端应用，或者团队更熟悉原子化CSS，那选Tailwind或者Ant Design Vue也没问题。

亲测可行的Vue3+Bootstrap落地方式：按需引入+主题定制+适配库结合

直接全量引入Bootstrap虽然简单，但会有冗余，也不符合现代前端的工程化要求；直接用BootstrapVue 3的话，虽然组件全，但灵活性不如自己搭，我摸索出来的方式是：按需引入Bootstrap 5的纯CSS/JS，搭配BootstrapVue 3的核心组件，再加上自定义SCSS变量,兼顾了效率和灵活性。

第一步：搭建基础Vue3项目

这个就不用多说了，用Vite或者Vue CLI都行，我推荐用Vite，因为构建速度快，开发体验好，搭建好项目后，记得先安装SCSS预处理器,因为Bootstrap的主题定制全靠SCSS变量。

第二步：按需引入Bootstrap 5的纯资源

这里不要直接安装bootstrap然后在main.js里全量引入，而是安装bootstrap和sass，然后在src目录下新建一个styles文件夹，里面放custom.scss和bootstrap.scss两个文件。

bootstrap.scss文件里，只引入你需要的Bootstrap模块，比如后台常用的表格、分页、表单、按钮、导航栏、卡片这些，其他的比如徽章、轮播图、模态框（如果用BootstrapVue 3的话可以不用）都可以删掉，引入的时候要注意顺序，先引入变量、函数、混合宏,再引入组件。

custom.scss文件里，覆盖Bootstrap的默认变量，比如主题色可以改成你的品牌色，圆角可以改得更小或者更大，间距可以改成更紧凑的4px/8px/16px，字体可以改成微软雅黑或者思源黑体，覆盖变量的时候要放在引入bootstrap.scss之前,这样才能生效。

然后在main.js里引入custom.scss,这样就完成了CSS的按需引入和主题定制。

JS的话，按需引入更简单，你可以用ES6的import语法直接引入Bootstrap 5的纯JS模块，比如需要用下拉菜单的话，就写import Dropdown from 'bootstrap/js/dist/dropdown'，然后在mounted钩子函数里初始化一下，不过如果用BootstrapVue 3的话，就不用自己初始化了,适配库会帮你处理好。

第三步：引入BootstrapVue 3的核心组件

虽然BootstrapVue 3还在beta，但核心的表格、分页、表单验证这些组件已经非常稳定了，而且用起来和Element Plus一样，都是Vue3的Composition API写法，安装的时候，要安装bootstrap-vue-3和@popperjs/core（因为下拉菜单、工具提示这些组件需要依赖它）。

安装好后，在main.js里引入BootstrapVue 3的核心CSS和组件，然后use一下，不过这里也要注意按需引入，不要全量引入，BootstrapVue 3支持Tree Shaking，你可以在组件里直接用<b-table>、<b-pagination>这些标签,Vite会自动帮你只打包用到的组件。

第四步：结合Vue3的特性优化交互

Bootstrap 5的交互已经很不错了，但结合Vue3的响应式、Composition API、组件过渡这些特性，可以做得更棒，比如你可以用Vue3的v-model绑定表单的值，用computed属性处理表格的数据过滤和排序，用transition组件给卡片、导航栏、模态框加上平滑的过渡效果,用ref和reactive管理组件的状态。

去年折腾的那个美食探店小程序后台，我就是用这种方式做的：表格的数据过滤和排序用computed属性，用户搜索或者点击排序按钮的时候，表格会实时更新；新增和编辑店铺的时候，用transition组件给模态框加上了从底部滑入的效果；表单验证用的是BootstrapVue 3的VeeValidate插件，规则配置起来非常简单,错误提示也很清晰。

Vue3+Bootstrap的优缺点和适用场景

优点

1. 上手快：如果团队有Bootstrap基础,一天就能上手；
2. 文档全：Bootstrap和BootstrapVue 3的文档都非常详细,还有很多免费的模板可以参考；
3. 性能好：按需引入的话,体积非常小；
4. 灵活性高：可以通过自定义SCSS变量完全改变UI风格。

缺点

1. 组件不如Element Plus、Ant Design Vue多：比如没有日期选择器、时间选择器、树形控件这些复杂的B端组件，不过可以用第三方插件补充，比如Vue Datepicker、Vue Treeselect；
2. BootstrapVue 3还在beta：虽然核心组件稳定，但可能会有一些小bug，不过更新速度很快,每周都会有修复；
3. 定制复杂组件需要自己写更多代码：比如做一个超级复杂的表格,可能需要自己写很多CSS和JS。

适用场景

1. 赶时间的后台管理系统；
2. 简单的企业官网；
3. 移动端适配的轻量应用；
4. 团队有Bootstrap基础的项目。

Vue3里用Bootstrap一点都不过时，只要选对了落地方式，绝对是赶项目的神器，如果你现在正在纠结选什么UI框架，不妨试试我这种按需引入+主题定制+适配库结合的方式,肯定不会让你失望。