如何解决Codepen中Buefy的b-field组件无法识别的Vue警告？

问题原因 #

控制台出现[Vue warn]: failed to resolve component: b-field警告，核心原因是仅引入了Vue 3和Buefy的样式文件，缺少Buefy的JavaScript核心库——Vue无法识别未注册的第三方组件，必须加载Buefy的JS文件并完成插件注册，才能正常使用b-field等组件。

解决步骤 #

1. 添加Buefy的JavaScript文件
   在Codepen的设置中（Settings > JavaScript > Add External Scripts/Pens），添加适配Vue 3的Buefy版本链接：

   https://unpkg.com/buefy@next/dist/buefy.min.js
   

   （注：buefy@next是专门适配Vue 3的分支，若使用Vue 2则用普通版本）

2. 注册Buefy插件到Vue应用
   修改你的JS代码，在挂载应用前调用app.use(Buefy)完成插件注册，这样所有Buefy组件会被全局注册：

   const app = Vue.createApp({
     data() {
       return {
         data: { "description": "lantern", "price": "15.75" }
       }
     }
   });
   
   // 注册Buefy插件
   app.use(Buefy);
   
   app.mount('#demo');
   

修改后效果 #

完成上述操作后，b-field组件会被正确识别，控制台的警告消失，Buefy组件能正常渲染并应用样式。

内容的提问来源于stack exchange，提问作者knot22