# plop-page

**Repository Path**: mytac/plop-page

## Basic Information

- **Project Name**: plop-page
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-14
- **Last Updated**: 2023-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# yh-page

### 安装

```
yarn add yh-page
```

本地安装需要配置 package.json，在 scripts 添加两行

```
    "page-init": "./node_modules/.bin/yh-page init",
    "new": "./node_modules/.bin/yh-page new"
    "web": "./node_modules/.bin/yh-page web"
```

### 配置

1.  先执行`yarn page-init`进行初始化
2.  按照命令行提示进行定制语言和样式的选择等（目前仅支持 ts+styled-components）

    ![demo](https://z3.ax1x.com/2021/04/25/cxvZee.png)

3.  输入模板生成后的目录

    ![demo](https://z3.ax1x.com/2021/04/25/cxvUFs.png)

4.  选择数据管理工具类型

    ![](https://z3.ax1x.com/2021/04/25/cxvrOU.png)

5.  输入你的路由文件路径，yh-page 将自动插入相关引用语句

```
input the routes file your components will be inserted!
```

6. 输入你项目的根 html 的路径，命令行运行`yarn web`将自动生成用户界面

```
input the path of the root index.html,the scripts YH-PAGE generated will be inserted!

```

都配置完成之后，终端输出：

```

【Success】yhpage has been initialized!

```

即初始化完成

## 生成组件

### 命令行模式

配置完成后，命令行键入`yarn new`，目前内置`list`,`form`,`detail`,`tap`,`step`五种模板，如下：
![demo](https://z3.ax1x.com/2021/05/22/gqEIpT.png)

### 用户界面模式

在命令行执行

```
yarn web
```

(注意：在执行这个命令之前，确保已生成 yh-page 的配置文件`.yhpagerc.js`)

之后，可看到
![demo](https://z3.ax1x.com/2021/06/01/2uNDbV.png)
点击右侧想要生成的模板，鼠标 hover 可预览模板，最终文件会写入到.yhpagrc.js 中配置的路径下。

### 自定义模板生成

点击用户界面右上角“+”，进入如下页面
![demo](https://z3.ax1x.com/2021/06/01/2uwlRg.png)
按照右侧规则和示例写好你需要的 dom 结构和 json，点击右上角“生成”，yh-page 会自动生成你需要的组件和 store 文件。

### 钩子函数

如果需要定制化一些内容，可以在`.yhpagerc.js`中的`hooks`字段进行配置

#### beforeInsertRoute

在插入新路由信息之前执行，将传入以下路由对象，可进行配置，该函数的返回值将插入到路由文件中。

```js
{
      path: string,
      key:  string,
      name: string,
      exact: boolean,
}
```

##### 示例

比如要设置在生成某组件后，将该组件放入`/aaa/`路径下，可以这样在`.yhpagerc.js`配置：

```js
hooks: {
    beforeInsertRoute: (route) => {
      const newRoute = { ...route };
      newRoute.path = '/aaa' + route.path;
      return newRoute;
    },
  },
```

### 模板示例

##### list

![list](https://z3.ax1x.com/2021/06/01/2uBluj.png)

##### form

![form](https://z3.ax1x.com/2021/06/01/2uB93D.png)

##### detail

![detail](https://z3.ax1x.com/2021/06/01/2uBgPK.png)

##### tab

![tab](https://z3.ax1x.com/2021/06/01/2uDSZn.png)

##### step

![step](https://z3.ax1x.com/2021/05/21/gHIc24.png)

### 更新日志

#### 6.15 v0.1.6

1. 添加钩子函数：`beforeInsertRoute`，用于处理在将新 page 插入到文件之前的操作。
2. 添加组件名的输入校验。

#### 6.8 v0.1.5

1. 优化模板中的 store 变量没有充分调用的问题：step、form 添加相关提交事件，删除了一些无用变量 √
2. 模板渲染器新增'submit'类型，用来生成提交相关的 store events √
3. 修复 Tab 样式，修正 Panel 背景颜色 √

#### 6.7 v0.1.4

1. 命令行交互配置项提示改为中文，减少由于语义不明配置不当的问题 √
2. 自动插入路由文件的 path,key,name 改为驼峰式写法 √
3. 配置项中加入了公共组件目录字段，模板所生成的子组件（如：Panel）将会放到该目录下 √
4. 修正了相关样式，Panel 的 header、Form 居左、Step padding √
5. ui 界面增加自定义组件名称的入口 √

#### 6.1 v0.1.3

1. 增加模板放大预览 √
2. 增加创建文件成功后的回显 √
3. 增加插入路由的功能 √
4. 增加用户界面开关 √
5. 用户界面无需手动添加节点了 √

#### 5.23 v0.1.2

新增用户界面支持

#### 5.21 v0.1.1

移除内置 plop

#### 5.13

修改 new 命令交互方式，新增[分页签详情模板](https://org.modao.cc/app/braj8rcby4rxebxcaathh35zf3vodi2d?simulator_type=device&sticky#screen=skmvvf9fir9stsa)

#### 4.26

支持安装到本地，与项目集成，无需再安装到全局了。

#### 4.25

支持本地配置文件、支持路由文件插入

### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

<!-- ### 其他

```

```-->

```

```