vue3 基于自定义vue文件模版 动态生成vue文件

Vue CLI 提供了一种简单的方式来自定义 Vue 文件模板，你可以在项目中创建一个 `template` 目录，并在该目录下创建一个或多个自定义模板文件，然后在生成文件时使用 `--template` 参数来指定使用哪个模板。

以下是一个简单的例子：

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

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: '{{ name }}',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

2. 在项目根目录下创建一个 `template` 目录，并将 `component.vue` 文件放入该目录。

3. 执行以下命令生成一个名为 `MyComponent.vue` 的文件：

vue generate component MyComponent --template component.vue --name MyComponent

在上述命令中，`--template component.vue` 参数指定了使用 `component.vue` 模板文件，`--name MyComponent` 参数指定了生成的组件名称为 `MyComponent`。

执行命令后，会在 `src/components` 目录下生成一个 `MyComponent.vue` 文件，其中的 `{{ name }}` 字符串会被替换为组件名称，即 `MyComponent`。

需要注意的是，模板文件中的代码可以使用 [EJS 模板语法](https://ejs.co/)，可以使用 `<% %>` 包裹 JavaScript 代码，`<%= %>` 包裹需要输出的变量或表达式。同时，Vue CLI 还支持其他类型的文件模板，例如页面模板、指令模板等。具体用法可以参考 [Vue CLI 官方文档](https://cli.vuejs.org/zh/guide/generating-components.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E6%A8%A1%E6%9D%BF)。