vue3 基于配置文件 生成vue文件

如果你想使用配置文件来生成 Vue 文件，可以使用一些类似于模板引擎的库，比如 EJS、Handlebars 等。以下是一个使用 EJS 模板引擎的简单例子：

1. 创建一个名为 `component.ejs` 的模板文件，内容如下：

<template>
  <div>
    <h1><%= name %></h1>
    <p><%= message %></p>
  </div>
</template>

<script>
export default {
  name: '<%= name %>',
  data() {
    return {
      message: '<%= message %>'
    }
  }
}
</script>

其中，`<%= name %>` 和 `<%= message %>` 表示需要动态替换的变量。

2. 创建一个名为 `config.json` 的配置文件，内容如下：

{
  "name": "MyComponent",
  "message": "Hello, world!"
}

其中，`name` 和 `message` 分别对应模板文件中需要替换的变量，其值可以根据实际情况进行修改。

3. 使用 Node.js 编写一个脚本来读取配置文件和模板文件，并将它们一起编译生成 Vue 文件。以下是一个简单的示例：

const fs = require('fs');
const ejs = require('ejs');

const config = JSON.parse(fs.readFileSync('config.json', 'utf-8'));
const template = fs.readFileSync('component.ejs', 'utf-8');
const output = ejs.render(template, config);

fs.writeFileSync(`${config.name}.vue`, output);

在上述脚本中，我们首先使用 `fs` 模块读取配置文件和模板文件的内容，然后使用 EJS 模板引擎将它们编译成 Vue 文件的源代码，并将结果写入到文件系统中。

4. 运行脚本，生成 Vue 文件。

node generate.js

在运行脚本后，会在当前目录下生成一个名为 `MyComponent.vue` 的文件，其中的变量值已经被动态替换为配置文件中的值。

需要注意的是，使用配置文件生成 Vue 文件可能比较灵活，但也需要谨慎使用，避免出现安全漏洞或错误的代码。同时，使用模板引擎也需要注意安全性，避免出现 XSS 攻击等问题。