将含傻瓜组件的Vue智能组件封装为npm插件后子组件无法识别如何解决

是否可以针对智能组件创建Vue插件发布到npm #

完全可以，智能组件封装了内部状态和业务逻辑，只要符合Vue插件的开发规范，完全可以正常打包发布到npm供他人使用。

<base-button>无法识别问题的解决方向 #

下面是按优先级排列的排查和解决方法：

• 优先排查全局注册的作用域问题 #

  你必须使用插件install方法传入的Vue构造函数/Vue3 app实例来注册全局组件，不能使用你自己插件代码内单独引入的Vue实例。如果插件和用户项目依赖的Vue是两个独立实例，你在自身引入的Vue上注册的组件，用户项目完全识别不到。
  正确的插件入口写法参考：

  // 插件入口文件 index.js
  import IncrementButton from './IncrementButton.vue'
  
  const IncrementButtonPlugin = {
    // Vue2 写法
    install(Vue, options) {
      // 用传入的Vue实例注册，不要自己import Vue来注册
      const BaseButton = {
        template: `<button><slot></slot></button>`
      }
      Vue.component('BaseButton', BaseButton)
      Vue.component('IncrementButton', IncrementButton)
    }
    // 如果是Vue3 写法
    // install(app, options) {
    //   const BaseButton = {
    //     template: `<button><slot></slot></button>`
    //   }
    //   app.component('BaseButton', BaseButton)
    //   app.component('IncrementButton', IncrementButton)
    // }
  }
  
  export default IncrementButtonPlugin
  

• 更稳妥的方案：移除全局注册，使用局部注册 #

  你当前的代码已经在IncrementButton的components选项里局部注册了BaseButton，这种情况下完全不需要全局注册BaseButton，还可以避免污染用户的全局组件命名空间。如果局部注册依然识别不到，检查你的打包配置：
  1. 确认打包工具（Vite/Rollup/Webpack）的externals配置没有把BaseButton列为外部依赖
  2. 确认打包时已经把.vue单文件组件的模板预编译为render函数，不要依赖用户项目的编译能力，避免用户用runtime-only版本的Vue时无法解析模板

• 排查组件命名大小写问题 #

  全局注册组件时如果命名为base-button，模板中只能用<base-button>调用；如果注册为驼峰名BaseButton，Vue支持驼峰和短横线两种调用方式，注意保持注册和使用的命名匹配。

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