重写VueJS组件使用JSX和渲染功能

Question

我有以下VueJS组件：

Vue.component('label-ui', { 
    props: ['type', 'size', 'color', 'position'], 

    template: ` 
     <div :class="[type, size, color, position]" class="ui labels"> 
      <slot></slot> 
     </div> 
    ` 

我想重写，这样我可以动态地设置模板的HTML标记 - 类似我做什么与此代码：

props: ['tag', 'attributes'], 
    render(createElement) { 
    return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default); 
    } 

不过，我想使用JSX语法 - 因为这里指出：https://vuejs.org/v2/guide/render-function.html#JSX

我想不通，但是，如何将这种使用JSX形式上做吨。

任何想法？

感谢

Answer 1

它听起来并不像你已经得到的WebPack与设立transpiling正确的巴贝尔插件。

JSX本身不受浏览器支持，像Webpack这样的模块打包程序将从JSX（从浏览器无法理解）转换（从JSX转换为Javascript）为浏览器可以理解的格式。

这将是您需要采取的第一步，可能是你错过了什么。

Answer 2

只要安装babel-plugin-transform-vue-jsx 我已经没有什么可添加到配置。它直接工作。