# code-generate

> cider C端前端代码生成工具

#### 它帮你干了什么？

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

#### 目前支持的C端项目

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

<br/>

# 安装或更新

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

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

或

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

<br/>

# 使用说明

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

#### 生成页面模板代码

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

```sh
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
```

<!-- ![](https://files.catbox.moe/eg06m6.png) -->

<!-- ![](https://files.catbox.moe/nse08j.png) -->

#### 生成页面组件模板代码

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

```sh
# 页面名称必须与原有的页面目录名称一致，否则会导致组件生成失败
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 模块，无需手动导入

```sh
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
```

<!-- ![](https://files.catbox.moe/o8ro7v.png) -->

<!-- ![](https://files.catbox.moe/8nqvod.png) -->

#### 生成全局组件模板代码

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

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

<!-- ![](https://files.catbox.moe/eo1ksz.png) -->

<!-- ![](https://files.catbox.moe/q7rnre.png) -->

#### 生成组件内组件模板代码

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

```sh
# 页面名称必须与原有的页面目录名称一致，否则会导致组件生成失败
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
```

<br />

# 其他问题

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

