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的仅运行时版本，其中模板选项不可用。将模板预编译为渲染函数，或使用包含编译器的构建。

现在：我该如何预编译这个模板？我知道我可以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

Answer 2

我不知道这是否可行：但是我只是在项目的根目录（“ package.json”所在的位置）中创建了一个文件

“ vue.config.js”

module.exports = {
  runtimeCompiler: true
}

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

2 个答案: