code-generate

cider C端前端代码生成工具

它帮你干了什么？

• 不再需要手工创建 页面、store module、组件 目录，运行指令即可一键生成
• 生成带有高度项目规范的代码

目前支持的C端项目

• M：https://gitlab.shopcider.cn/shopcider/mobile-site-v2
• PC：https://gitlab.shopcider.cn/shopcider/desktop

安装或更新

请先配置node环境，建议使用nvm并安装node >= 14版本

npm i @xuanzai/code-generate -g --registry=https://registry.npmjs.org/

或

yarn global add @xuanzai/code-generate --registry=https://registry.npmjs.org/

使用说明

以下所有操作都在终端项目根目录下执行：

生成页面模板代码

tips：它将自动为你导入页面 redux 模块 与 页面 scss 文件，无需手动导入

gen view <viewName：页面目录名称>
# 示例
gen view test-page
# 生成结果
|- views
  |- test-page
    |____index.tsx
    |____state.ts
    |____make-selector.ts
    |____types.ts
    |____selectors.ts
    |____reducer.ts
    |____actions.ts
    |____constants.ts
|- styles
  |- views
    |- test-page
      |____index.scoped.scss

生成页面组件模板代码

tips：它将自动为你导入 scss 样式模板，无需手动导入

# 页面名称必须与原有的页面目录名称一致，否则会导致组件生成失败
gen view-component <componentPath: 页面/组件目录/组件名称>
# 示例
gen view-component test-page/component/test-page-component
# 生成结果
|- views
  |- test-page
    |- component
      |- types
        |____test-page-component.ts
      |____test-page-component.tsx
|- styles
  |- views
    |- test-page
      |- component
        |____test-page-component.scoped.scss

生成 store module 模板代码

tips：它将自动为你导入页面 redux 模块，无需手动导入

gen store <storeModuleName：redux 模块名称>
# 示例
gen store my-module
# 生成结果
|- store
  |- modules
    |- my-module
      |____state.ts
      |____make-selector.ts
      |____types.ts
      |____selectors.ts
      |____reducer.ts
      |____actions.ts
      |____constants.ts

生成全局组件模板代码

tips：它将自动为你导入 scss 样式模板，无需手动导入

gen component <componentName：组件目录名称>
# 示例
gen component my-button
# 生成结果
|- components
  |- my-button
    |____index.tsx
    |____types
    | |____index.ts
    |____README.md
|- styles
  |- components
    |- my-button
      |____index.scoped.scss

生成全局组件子组件模板

tips：它将自动为你导入 scss 样式模板，无需手动导入

# 全局组件名称必须与原有的组件目录名称一致，否则会导致子组件生成失败
gen component-component <componentPath: 组件/组件目录/组件名称>
# 示例
gen component-component my-button/component/test-component
# 生成结果
|- components
  |- my-button
    |- component
      |- types
        |____test-component.ts
      |____test-component.tsx
|- styles
  |- components
    |- my-button
      |- component
        |____test-component.scoped.scss

其他问题

请在飞书上联系 @温子旋 Xuanzai