首页 > 解决方案 > 为 npm 打包智能 Vue 组件

问题描述

是否可以为智能组件创建一个 Vue 插件而不是一个愚蠢的组件并将其打包为 npm?

这是一个智能组件的示例,它使用了一个哑组件 BaseButton。

<template>
  <div class="increment-button" v-on:click="increment">
<base-button>{{ number }} Increment</base-button>
  </div>
</template>

<script>
// Base Button is dumb
const BaseButton = {
  template: `<button><slot></slot></button>`
}

// Increment Button is smart
export default {
  name: 'IncrementButton',
  components: { BaseButton },
  data () {
return {
  number: 0
}
  },
  methods: {
increment () {
  this.number++
}
  }
}
</script>

当我安装我的 Vue 插件并实例化我的智能组件时,Vue 不会识别<base-button>为 Vue 组件并呈现它,即使我在 install 方法中全局注册它。

有人可以指导我正确的方向吗?

最好的,比拉尔

标签: javascriptvue.js

解决方案


推荐阅读