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

Question

我有一个使用 Webpack 构建的 Vue 站点。我有一个包含组件的 TypeScript 文件：

// my-component.ts

import Vue = require('vue');

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

当我尝试使用此组件时，我收到以下警告：

您正在使用 Vue 的仅运行时构建，其中模板选项不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。

现在：我如何预编译这个模板？我知道我可以定义一个.vue文件，甚至可以在里面使用 TypeScript <script></script>，但我宁愿在纯 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://v2.vuejs.org/v2/guide/render-function.html