概述

当在进行项目开发时。需要创建许多的组件并编写许多模板代码。为了节省相关工作量并统一代码风格。插件也提供了快捷创建的功能。
通过此功能你可以非常快速的创建模板组件/页面等。甚至还有一些高级的定制化功能。

此功能有点类似 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的模板文件。像是这样

yml

# .templates/custom-vue.yml

# 模板名称
name: 'custom-vue'
# 详细描述
description: '自定义的的vue模板'
# 标签
tags: ['vue', 'uni']
# 是否覆盖创建组件/页面
# override: ['react-component']
# 模板内容
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;
    }

解释:

name: 模板名称
description: 详细描述
tags: 标签数组
override: 是否覆盖创建组件/页面。详细说明请看下面
tpl: 模板内容。依照上面的例子。我们会在你输入的组件名称文件夹中创建两个文件。他们的文件名分别是index.vue和index.less。内容即是模板字符串内容（变量会被替换）

变量: 在上面的文件中有诸如[:=xxx:]的字符。这是模板变量。在生成模板的过程中。你可以通过模板变量来进行更加细致的控制。支持的变量有:

CamelCaseName 组件驼峰命名
PascalName 组件帕斯卡命名
KebabCaseName 组件横杠线命名
UnderlineCase 下划线命名
dirname 组件目录名

tpl类型:

关于tpl支持的类型是

typescript

type TTemplate = string | {
    /** 模板文件名称 */
    name: string;·
    /** 模板字符串 */
    template: string;
}

并且name是支持变量字符串的。可以修改模板名称

右键-通过模板创建

在.template子级的下的符合上面创建组件的条件目录下。都可以通过右键-通过模板创建。输入组件名称。即可根据模板格式创建组件

wmeimob.eject

伴随插件的升级维护。我们会对模板进行修改。大多数情况下我们希望你们能够使用最新的插件提供的最新的模板来进行开发。
但有时候,例如老旧项目使用的不兼容的模板。所以插件提供了一个方法来将模板放到项目中。下面将演示如何操作:

1.打开命令面板,输入 wmeimob.eject
2.选择当前你项目适配的模板
3.回车就完成了！模板会被复制到你的项目根目录下的.templates文件夹中

提示

右键-创建页面/组件会优先使用eject出来的模板而不是编辑器提供的默认模板

但是需要注意的是: eject出来的模板是通过 name 字段匹配的，请勿修改

override

v0.8.0 新增

警告

我们更建议使用上面的eject方式.而不是override

上面我们讲述了创建组件/页面的能力。其内置了默认的模板。大部分时候，默认模板已经能够满足项目需求。当然也有一些特殊场景。需要对默认的模板进行修改。这时候就可以使用这个参数进行覆盖。

根据项目类型的不同。默认模板有以下类型。也就是说。override的参数是下面这些组成的数组。

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	默认: false. 是否在src目录下全局可创建页面。

概述 ​

右键-创建页面 ​

右键-创建组件 ​

右键-通过模板创建 ​

创建模板 ​

右键-通过模板创建 ​

wmeimob.eject ​

override ​

配置项 ​

概述

右键-创建页面

右键-创建组件

右键-通过模板创建

创建模板

右键-通过模板创建

wmeimob.eject

override

配置项