You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

120 lines
2.8 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# 稻田管理后台 v3 + and4
## Project Setup
```node 16.13.2 安装依赖
npm install
```
### Compile and Hot-Reload for Development
```运行
npm run dev
```
### Type-Check, Compile and Minify for Production
```打包
npm run build
```
### css规范
```
1.命名规范
g_xxx 全局css。
1常用css均已放置在 assets/base.css 中,如需改动,提前说
2全局变量采用下划线链接
m-xxx 页面内的模块
1页面内类名采用中划线连接
2.排版规范
尽量采用flex弹性布局进行处理
3.文件命名:见名知意
4.标签命名:
文件根标签p-页面名
文件内部模块名m-模块功能名
```
### js规范
```
1.方法命名规范
get 请求事件
update 更新事件
delete 删除事件
edit 编辑事件
view 查看事件
handle 主动事件
共用:采用驼峰命名
2.公共api规范
常用api均放置在src下的utils中。
绝对避免同一种功能使用多个方法,比如时间戳转换,比如上传功能
3.当页面中存在定时器或者延迟器时,一定要添加离开页面时清除定时器
4.使用pina进行全局状态处理。
本地缓存能不用则不用,如果使用,一定要标记好添加和清除的条件
5.弹窗类相关的属性全部放在一个对象中。示例:用户弹窗
userModel:{
id:1,// 用户ID
isShow:false,// 是否展示
...
}
```
### 页面规范
```
1.加载监听
页面渲染需要分三步走:
加载前:
显示loading
加载后:
有数据:正常渲染
无数据:显示空状态
2.每个页面一定要添加注释。示例格式
* title 页面标题
3.项目中优先使用双引号,若非内嵌,不使用单引号
```
### 分支
```
主分支 master
开发分支 姓氏简称/dev
```
### 公共组件
```
位置src/views/components
功能:
image
swiperPicture: 轮播式图库
userPicture : 用户图库
map
poi : poi搜索
upload
annex : 附件上传。多图平铺
image : 单张图片上传。支持身份证识别
wechat
job : 同步显示微信端职位详情页UI
handleEventl : 延迟处理定时器。
breadcrumb : 面包屑导航
```
### 公共表格样式(底部分页器)
```
位置:/merchantManagement/notes
功能:
table表格样式处理
<div class="m-table g_mt_20 antd-table table_container">
<a-table sticky :columns="columns" :data-source="tableData.list" size="middle" :pagination="false" :loading="tableData.loading" class="g_clear_scroll" :scroll="{x:'100%'}">
</a-table>
<div class="g_pb_16 g_pt_16 g_pageBottom" v-if="tableData.list.length > 0">
</div>
</div>
css
.pageBottom {
position: sticky;
bottom: -16px;
width: 100%;
background-color: #fff;
z-index: 999;
}
```