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

Posted 2023-02-22

【中文标题】使用模板字符串预编译 TypeScript Vue 组件

【英文标题】：Pre-compile TypeScript Vue components with template string

【发布时间】：2017-04-09 22:55:22

【问题描述】：

我有一个使用 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 .)

---

【参考方案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

【讨论】：

嘿，谢谢，我应该添加到我考虑过的问题中。但这可能会损害性能？除了为最终的包大小增加 30kb...

是的，有一点折衷，Vue 在运行时在standalone build 中编译模板，所以你必须接受性能损失（在大多数情况下它可能可以忽略不计） .但是，如果性能更成问题，那么您应该考虑使用 .vue 文件并编译它们。在内部，vue 将 .vue 文件编译为适用于 runtime-only 构建的渲染函数。

编辑：似乎不可能在自己的 .js 文件中定义组件的脚本部分，然后在 .vue 文件中定义唯一的模板？因为这对我的情况来说是完美的。 vue-loader.vuejs.org/en/start/spec.html: '*.vue 文件是一种自定义文件格式，它使用类似 HTML 的语法来描述 Vue 组件。每个 *.vue 文件由三种***语言块组成：

你一直都是对的，我可以只使用一个相对文件“如果你喜欢将你的 *.vue 组件拆分成多个文件，你可以使用 src 属性导入一个语言的外部文件块：“：<script src="./script.js"></script>

@craig_h 是的，确实是一种权衡。这导致了我们项目中的性能问题。有谁知道是否可以在 Typescript 中预编译模板而无需将所有内容都转换为 .vue 文件？

【参考方案2】：

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

“vue.config.js”

module.exports = 
  runtimeCompiler: true

【讨论】：

我认为这更像是“要走的路”。

但这是要走的路吗？还是你只是想纠正我的语法？ o.O :D

大部分只是语法错误。哈哈