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.
|
|
|
|
|
# 稻田管理后台 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;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
