Bootstrap Vue项目迁移至Vuetify可行性及操作问题咨询

能不能实现全组件替换适配 #

完全可以，不存在功能层面的硬缺口，所有已用的Bootstrap组件元素都能完成适配替换。
Bootstrap（包括搭配Vue用的Bootstrap Vue）覆盖的布局、交互、反馈类场景，Vuetify全有对应组件：网格布局、导航栏、按钮、表单控件、弹窗、卡片、分页、提示条、下拉菜单、轮播这些常用组件一个不少，甚至Vuetify自带的响应式断点、多主题切换、内置表单校验、无障碍支持这些能力，比Bootstrap的开箱即用度还高。我自己经手过3个Bootstrap Vue写的中后台项目迁Vuetify，全程没遇到过哪个已实现的功能点因为Vuetify缺组件卡壳的。
替换的时候不需要做底层魔改，对照API做映射调整就行：比如原来的<b-button>换成<v-btn>，原来靠加class控制的尺寸、颜色、按钮变体，改成给Vuetify组件传对应的props就行；原来靠container/row/col类名写的网格，换成<v-container>、<v-row>、<v-col>组件式网格就好。真遇到极少数高度定制化的特殊业务组件，哪怕两个库都没原生实现，自己基于Vue封装的成本也极低，根本不会阻碍迁移。

迁移时要不要同时装两个类库的依赖 #

不用全程双依赖共存，按迁移阶段灵活处理就好：

• 迁移过渡期完全可以临时同时装两个依赖。别上来就把Bootstrap依赖删了硬改，很容易改到一半项目跑不起来。建议按业务模块、路由页面分批次替换，改完一个模块就测透一个模块的功能和样式，风险低很多。两个库本身没有什么不可调和的运行时冲突，顶多是全局重置样式可能有小范围覆盖，只要把Vuetify的样式放在引入顺序的最后，或者给还没迁移的Bootstrap区块加个样式作用域前缀就能解决。
• 等所有组件、逻辑、样式都替换完，全流程验证没问题之后，一定要把Bootstrap、Bootstrap Vue以及相关的配套依赖全卸载了。长期双依赖共存平白增加打包体积不说，还很容易留全局样式互相污染的坑——比如Bootstrap默认的按钮样式、盒模型规则偷偷覆盖Vuetify的组件样式，等线上出显示问题再排查就麻烦了。

几个实用的迁移小建议 #

• 正式改代码前先列个清单，把当前项目里用到的所有Bootstrap组件、工具类都捋一遍，提前对应好Vuetify里的替代组件和API，别改到一半漏东西返工。
• 如果你的项目之前没用到Bootstrap Vue的组件，只是直接引Bootstrap靠原生class写样式，替换的时候记得把冗余的Bootstrap类名都换成Vuetify自带的工具类或者自定义样式，别留一堆没用的类名占地方。
• 替换顺序建议先改全局通用组件，比如导航、页脚、通用按钮、通用表单项，再改具体业务页面，能省很多重复调整样式的工作量。

内容的提问来源于stack exchange，提问作者VLC-CMP