概述

在进行项目开发时，往往需要创建许多组件并编写重复的模板代码。为了节省工作量并统一代码风格，插件提供了快捷创建功能。

通过此功能，你可以快速创建模板组件或页面，甚至使用高级定制化功能。此功能类似于 NestJS CRUD 的编辑器实现。

插件提供了快捷方式帮助你创建一个页面或组件。通过在指定位置右键即可使用相关功能。示例：

vscode-guide-create

右键-创建页面

在 src/pages 目录及子目录下，点击右键选择「创建页面」。

注意

仅在满足正则 /(src|lib)\/(pages|page-components|views)/ 的路径下才会出现创建页面选项，其他目录无法唤起该选项。

如果你的项目不符合此规则，可以开启全局创建页面选项来支持。

操作步骤：

右键点击目标目录
输入组件名称
创建成功

右键-创建组件

操作同上。

注意

仅在满足正则 /(src|lib)/ 的路径下才会出现创建组件选项，其他目录无法唤起该选项，且不支持自定义设置。

注意：仅在 src 目录下才会出现创建组件选项。

右键-通过模板创建 v0.7.0+

上述两种创建模式是基于公司项目框架制定的默认标准。在实际开发中，如果需要使用自定义模板，可以使用插件 v0.7.0 推出的自定义模板功能。

创建模板

要使用此功能，需要在项目根目录下新建 .templates 文件夹，并在其中创建名为 [name].yml 的模板文件。示例如下：

yaml

# .templates/custom-vue.yml

name: 'custom-vue'
description: '自定义的 vue 模板'
type: ['vue-page']
tags: ['vue', 'uni']
order: 1
single: false
tpl:
  index.vue: |
    <template>
      <div>
        <Alert message="扩展 antd 按钮样式" type="info" show-icon style="margin-bottom: 12px" />
      </div>
    </template>

    <script setup lang="ts">
    import { Alert, Space, Card, Divider } from 'ant-design-vue'
    import { AButton } from '@/components/basic/button'
    import { themeColors } from '@/layout/header/components/setting/constant'

    defineOptions({
      name: '[:=PascalName:]'
    })
    </script>
  index.less: |
    .a {
      color: red;
    }
  '[:=PascalName:].less': | // 文件名称也可以使用变量占位
    .a {
      color: red;
    }

配置项说明：

name: 模板名称。
description: 模板详细描述。
type: 模板类型，具体请参考下文 type 部分。
tags: 标签数组。
order: 排序权重，数字越大越靠前，默认为 1。
single: 是否为单文件组件，默认为 false。默认创建组件时会将文件包裹在一个文件夹中；若希望直接创建单文件，可设置为 true。
tpl: 模板内容。按照上述示例，会在你输入的组件名称文件夹中创建 index.vue 和 index.less 两个文件，内容即为模板字符串（变量会被自动替换）。

变量说明：

在模板文件中可以使用 [:=xxx:] 形式的变量占位符，生成时会被替换为实际值。支持的变量包括：

CamelCaseName: 组件驼峰命名 (camelCase)
PascalName: 组件帕斯卡命名 (PascalCase)
KebabCaseName: 组件横杠线命名 (kebab-case)
UnderlineCase: 下划线命名 (snake_case)
dirname: 组件目录名

tpl 类型定义：

tpl 字段支持的类型如下：

typescript

type TTemplate = string | {
    /** 模板文件名称（支持变量字符串） */
    name: string;
    /** 模板字符串内容 */
    template: string;
}

使用自定义模板

在 .templates 目录配置好模板后，在符合创建条件的目录下，右键选择「通过模板创建」，输入组件名称，即可根据自定义模板生成组件。

wmeimob.eject

随着插件的升级维护，内置模板也会不断更新。建议优先使用插件提供的最新模板进行开发。

但在某些场景下（如老旧项目不兼容新模板），可以使用 eject 功能将内置模板导出到项目中进行自定义。操作步骤如下：

打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入 wmeimob.eject。
选择当前项目适配的模板。
按回车确认。模板将被复制到项目根目录下的 .templates 文件夹中。

提示

「右键-创建页面/组件」会优先使用 eject 导出的模板，而非插件内置模板。

注意：eject 导出的模板是通过 name 字段进行匹配的，请勿修改该字段。

type v1.5.0+

前文介绍了创建组件/页面的能力，其内置了默认模板。虽然默认模板能满足大部分需求，但针对特殊场景，可以通过 type 参数覆盖默认模板。

根据项目类型的不同，默认模板包含以下类型：

typescript

export type TTemplateName =
  | 'react' | 'react-component' | 'react-page'
  | 'taro' | 'taro-component' | 'taro-page'
  | 'react-native' | 'react-native-component' | 'react-native-page'
  | 'vue' | 'vue-page' | 'vue-component'
  | 'uni' | 'uni-component' | 'uni-page'
  | 'umi-page' | 'umi-component'
  | 'umi-max-page' | 'umi-max-component';

配置项

参数	描述	备注
`wmeimob.template.globalCreatePage`	是否在 `src` 目录下全局启用创建页面功能。	默认值: `false`

概述 ​

右键-创建页面 ​

右键-创建组件 ​

右键-通过模板创建 v0.7.0+ ​

创建模板 ​

使用自定义模板 ​

wmeimob.eject ​

type v1.5.0+ ​

配置项 ​

概述