tpl创建统一功能模块模板,支持模板有 page ts 、 函数组件 ts。 page模块 结构如下: xxx // 业务组件根目录 |-- components // 业务组件目录 |-- models // 业务 models 目录 |-- xxx.ts // 业务 model 文件,自动加载 services |-- services // 业务 services 目录 |-- xxx.ts // 业务 service 文件 |-- XxxPage.ts // 业务组件开发入口,自动 connect model |-- XxxPage.less // 业务样式 |-- index.js // 业务入口,使用 dynamic 引用 |-- MapProps.tsx // mapStateToProps、mapDispatchToProps,自动引用 model 组件模块 结构如下: Xxx // 业务组件根目录,首字母自动大写 |-- Xxx.less // 样式文件,自动引入classNames库 |-- Xxx.tsx // 组件代码 |-- index.ts // 组件入口 安装插件市场搜索 Tpl-umifile 安装 使用1.打开vscode 命令面板 输入 tpl-help-select 回车 可选择创建componet还是page (或是输入tpl-create-page 直接选择创建页面,输入tpl-create-Component 直接选择创建组件 2.输入组件或页面的名称回车即可完成创建 如果相同时创建多个那么只需在输入名称时以,分隔 例如:需要创建 home1,home2 2个页面,则输入
或是按下快捷命令Comm+f10 快速唤出选择模板 运行结果: home1 // 业务组件根目录 |-- components // 业务组件目录 |-- models // 业务 models 目录 |-- home1.ts // 业务 model 文件,自动加载 services |-- services // 业务 services 目录 |-- home1.ts // 业务 service 文件 |-- Home1Page.tsx // 业务组件开发入口,自动 connect model |-- Home1Page.less // 业务样式 |-- index.ts // 业务入口,使用 dynamic 引用 |-- MapProps.tsx // mapStateToProps、mapDispatchToProps,自动引用 model home2 // 业务组件根目录 |-- components // 业务组件目录 |-- models // 业务 models 目录 |-- home2.ts // 业务 model 文件,自动加载 services |-- services // 业务 services 目录 |-- home2.ts // 业务 service 文件 |-- Home2Page.tsx // 业务组件开发入口,自动 connect model |-- Home2Page.less // 业务样式 |-- index.ts // 业务入口,使用 dynamic 引用 |-- MapProps.tsx // mapStateToProps、mapDispatchToProps,自动引用 model 为了规范,在创建模块的时候,请确认当前工程存在'src/pages','src/components'及文件夹 umi ts 函数组件模板该插件支持 umi ts 函数组件模板,如果有 src/components 目录,则在该目录下创建,否则在执行的目录下创建组件; 组件名称默认会做首字母大写自动转化; 说明
|