使用模板字符串预编译 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>"
});

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

You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

现在：如何预编译这个模板？我知道我可以 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 文件的想法并且你的模板相对简单，那么实际上还不错，这是上面的 fiddle组件：

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 组件

Pre-compile TypeScript Vue components with template string

typescript

webpack

vue.js

vue-component