代码规范
HTML 规范
基础脚手架 PC
<!-- 统一使用HTML5的DOCTYPE -->
<!DOCTYPE html>
<!-- lang使用zh-CN，考虑设备兼容 -->
<html lang="zh-CN">
<head>
<!-- 页面编码使用UTF-8 -->
<meta charset="UTF-8" />
<!-- 采用IE=Edge, chrome=1 浏览器兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<!-- keywords,description 必须 -->
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- title 必须 -->
<title>Document</title>
<link rel="stylesheet" href="index.css" />
<!-- @author [yourname] | @design [designer name] | @pm [pm name] -->
</head>
<body>
<!-- start 模块名称 -->
<!-- end 模块名称 -->
<script src="index.js"></script>
</body>
</html>
基础脚手架 M 站
<!-- 统一使用HTML5的DOCTYPE -->
<!DOCTYPE html>
<!-- lang使用zh-CN，考虑设备兼容 -->
<html lang="zh-CN">
<head>
<!-- 页面编码使用UTF-8 -->
<meta charset="UTF-8">
<!-- viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- keywords,description 必须 -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- title 必须 -->
<title>Document</title>
<link rel="stylesheet" href="index.css">
<!-- @author [yourname] | @design [designer name] | @pm [pm name] -->
</head>
<body>
<!-- start 模块名称 -->
<!-- end 模块名称 -->
<script src="index.js"></script>
</body>
</html>
CSS 规范
.
└── scss
├── _init
│ ├── _init.scss // 每个scss都需要引用这个文件，这个文件引用了下面两个文件
│ ├── _mixin.scss // 封装的一些辅助方法
│ └── _variable.scss // 全局用到的参数
├── global // 全局样式
│ ├── _acss.scss // 原子化CSS
│ ├── _reset.scss // 样式重置
│ ├── _base.scss // 基础样式
│ └── index.scss // 这个文件引用了以上所有文件
└── index
└── index.scss
项目结构
- src
- api // 接口管理目录
- assets // 图片资源目录
- common // 公共资源目录（函数库、请求封装）
- components // 组件库
命名规范
组件命名：
文件与组件命名保持一致，使用 PascalCase，即驼峰命名法，如 Timeline.tsx 为时间轴组件
页面命名：
变量命名：
常量-全大写+下划线，如：
https://github.com/Buddhas/ele-admin-vue/blob/master/ele-admin-vue/README.md
我认为移动端没必要和 ant design pro 硬绑定到一起，理由如下
（一）移动端
最原始版本的 ant design pro 不仅有权限，有国际化，有 ant design pro 有 pro table 等，还有与 umi ui 的结合，是软绑定观点，
如果说 ant design 是开源的 UI 框架，那么 ant design pro 更以阿里脚手架为核心的聚合产品，
他更适用于做后台，
两者有什么是同通的，权限，
用 umi 开发，已经很大程度上的规避掉原生开发的一些列问题，
约定式路由，
现在的重构版与紫菜的项目的区别在于
重构版用 hook 来写组件，样式用的是 sass，jqb design 用的也是 sass
紫菜用 class 类写组件，样式用 css in js，
像其他的，大多数都是看的懂的
随着版本的升级，pro 现在已经有 5 了，紫菜用的是 4，那是否为了新而追求新。共赢和咨询用的是 umi2，现在重构版的用的是 umi3，是否也要统一呢？
就像我现在去写惠选宝业务一样，让我写，一天就上手了，写的无非是业务逻辑和组件拼接，这些在原有页面已经有，找起来很方便。
而命名是个大问题，正如我下面所说，我们需要的是代码规范，而非项目统一，项目是没发统一的，
umi 的特点是强约束、配置化和约定化
强约束
React 框架 + TypeScript + Eslint + Prettier + 固定配置 + dva
你写的代码的格式，类型，写法都被限制
如果提高代码质量，
搭建 gitlab，上传至仓库，发布前需将代码给前端同事 review，既能提高自己的 review 代码的能力，也能找到一些明显的 bug