# 关于通用化前端组件拆分与项目模版搭建
# 技术栈
- Vite
- TypeScript
- Vue3
- Sass
- Axios
- Eslint
- Node.js
# 开发步骤
- 制定组件需求文档，注明组件所需props emits slot等（目标：组件文档）；
- 完成常用组件库封装，例如活动规则、登陆、排行榜等（目标：直接引入组件并进行简单配置注入后使用 <components :data="data"></components>）；
- 针对项目创建通用模版，例如答题类，引入所需组件后创建模版项目，使后续开发可git clone快速搭建（目标：重复需求产生时按照对应模版克隆建项）;
- 封装脚手架工具管理模版，使用Nodejs, commander、inquirer、download-git-repo等工具实现命令式添加模版地址，管理模版以及快速init download git repo（目标：脚手架发布到npm或自建包管理仓库，实现如：npm i -g mktzr-cli;（安装脚手架） mktzr-cli init answer-project target-dir;（根据模版名建项） mktzr-cli list;（查看模版列表））。
# 组件
# 活动规则组件
props：
| 注释 | 名称 | 类型 | 必须 | 默认值 |
|---|---|---|---|---|
| 活动规则内容 | content | String | false | |
| 关闭按钮位置 | closePosition | 'bottom-center' || 'top-right' | false | 'bottom-center' |
emit:
| 注释 | 名称 | 参数 |
|---|---|---|
| 切换显示状态 | stateChange | 当前显示状态:Boolean |
slot: 该组件插槽为条件展示，当传递插槽时显示插槽内容，未传递插槽内容显示props.content内容
# 内部手机号登陆组件
props:
| 注释 | 名称 | 类型 | 必须 | 默认值 |
|---|---|---|---|---|
| 手机号placeholder | telPlaceholder | String | false | '请填写手机号' |
| 短信验证码placeholder | verifyPlaceholder | String | false | '请填写验证码' |
| 重新获取等待时间(s) | delay | Number | false | 60 |
| 标题 | title | String | false | '先登录再抽奖' |
| 是否允许关闭 | allowClose | Boolean | false | false |
emits:
| 注释 | 名称 | 参数 |
|---|---|---|
| 提交登陆 | login | {tel, verify} |
# 排行榜
props:
| 注释 | 名称 | 类型 | 必须 | 默认值 |
|---|---|---|---|---|
| 排行榜数据 | list | {[nickname: String, rank: Number]} | true | |
| 本人排名 | myRanking | [nickname: String, rank: Number] | false | [] |
# 答题
props:
| 注释 | 名称 | 类型 | 必须 | 默认值 |
|---|---|---|---|---|
| 题目信息 | topic | {question: String, correct: Number, option: Array} | true | |
| 限时(s) | limitTime | Number | false | 10 |
emits:
| 注释 | 名称 | 参数 |
|---|---|---|
| 作答 | complete | (correct, choose) |
# 拼图
props:
| 注释 | 名称 | 类型 | 必须 | 默认值 |
|---|---|---|---|---|
| 拼图块数量 | count | Number | false | 9 |
| 限时(s) | limitTime | Number | false | 60 |
emits:
| 注释 | 名称 | 参数 |
|---|---|---|
| 完成 | complete | (useTime, isSuccess) |
slots: 插槽部分定义拼图块