使用模板字符串预编译TypeScript Vue组件

Question

我有一个使用Webpack构建的Vue站点。我有一个包含一个部件的打字稿文件：

// my-component.ts 

import Vue = require('vue'); 

export default Vue.component("my-component", { 
    template: "<div>I am a component</div>" 
}); 

当我尝试使用这个组件，我得到以下警告：

您使用的是仅运行时建立Vue公司的在模板选项不可用。可以将模板预编译为渲染函数，也可以使用编译器包含的构建。

现在：我该如何预编译这个模板？我知道我可以define a .vue file甚至在<script></script>里面使用TypeScript，但我宁愿用纯的TypeScript定义我的组件，以便在WebStorm中获得很好的TypeScript支持。

这可能吗？

---

（我知道我还可以用第二个选项去通过vue/dist/vue.js创建编译器包括构建一个别名，但我觉得这给了我一个性能损失。最起码，它增加了20KB到。我的版本）

---

Answer 1

您应该能够使用standalone build要做到这一点，只需添加以下到您的WebPack配置（这是最近发布Vue）：

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.common.js' 
    } 
} 

它应该为您提供独立构建，其中包含模板选项。

---

如果你想创建自己的render functions然后你可以。在它的最基本的，你会得到：

Vue.component('msg', { 
    functional: true, 
    render: (createElement, context) => { 
    return createElement('div', context.props.message) 
    }, 
    props: ['message'] 
}) 

这是一个有点复杂，但其实不是太糟糕了，如果你真的不喜欢使用.vue文件的想法和你的模板是相对简单的，下面是小提琴上述组件：

https://jsfiddle.net/et67zqdp/

它是那么值得考虑看看：

https://vuejs.org/v2/guide/render-function.html