能否将React、Vue等Web应用框架作为通用模板引擎使用？

方案可行性结论 #

完全可以实现，这类前端框架的渲染逻辑本质是「数据+模板结构」到字符串的映射，默认输出HTML只是适配浏览器DOM场景的预设，调整渲染逻辑即可生成任意格式的纯文本，完全可以替代T4模板实现代码、配置文件等内容的生成，同时还能和你下一代Web应用的技术栈复用。

具体实现方案 #

Vue 实现方式 #

使用Vue官方提供的服务端渲染工具包@vue/server-renderer即可实现，不需要修改任何模板语法，你可以直接在模板中编写你需要的目标文本内容，不需要包裹HTML标签：

1. 编写纯文本模板（以生成C#实体类为例）

<template>
public class {{ className }} {
<template v-for="item in fieldList">
    public {{ item.type }} {{ item.name }} { get; set; }
</template>
}
</template>
<script setup>
defineProps(['className', 'fieldList'])
</script>

2. 调用渲染API获取输出文本

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import EntityTemplate from './EntityTemplate.vue'

// 传入模板需要的数据源
const app = createSSRApp(EntityTemplate, {
  className: 'Product',
  fieldList: [
    { type: 'int', name: 'Id' },
    { type: 'string', name: 'ProductName' },
    { type: 'decimal', name: 'Price' }
  ]
})

// 拿到最终生成的纯文本，可直接写入.cs文件
const outputCode = await renderToString(app)

React 实现方式 #

逻辑和Vue完全一致，使用React官方服务端渲染APIreact-dom/server即可实现：

1. 编写JSX纯文本模板

// EntityTemplate.jsx
export default function EntityTemplate({ className, fieldList }) {
  return (
`public class ${className} {
${fieldList.map(item => `    public ${item.type} ${item.name} { get; set; }`).join('\n')}
}`
  )
}

2. 调用渲染API获取输出

import { renderToString } from 'react-dom/server'
import EntityTemplate from './EntityTemplate.jsx'

const outputCode = renderToString(<EntityTemplate
  className="Product"
  fieldList={[
    { type: 'int', name: 'Id' },
    { type: 'string', name: 'ProductName' },
    { type: 'decimal', name: 'Price' }
  ]}
/>)

相比T4模板的优势 #

• 跨环境运行：不依赖Visual Studio，任意安装Node.js的环境都可执行，可无缝集成到CI/CD自动化流程
• 工具链完善：VSCode等主流编辑器都原生支持Vue/React的语法高亮、自动格式化、语法校验，开发体验远优于T4
• 技术栈复用：模板语法和你后续Web应用开发所用的技术完全一致，团队不需要额外学习新的模板语法，维护成本极低

内容的提问来源于stack exchange，提问作者Joshua Frank