前端开发规范整理记录

开发

# 克隆项目
https:svn/git/前端src/project

# 进入项目目录
cd project

# 安装依赖
yarn install

# 启动服务
yarn dev
浏览器访问 http://localhost:8080/

发布

# 构建测试环境/生成环境
yarn build

页面模块 view

核心代码

commit信息分类标准（适用svn、git）

feat：新功能
fix：修补bug
docs：文档
style：格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动

例如：
commit -m 'feat：新增xxx功能'
commit -m 'fix：恢复xxx问题'
commit -m 'docs：添加xxx文档/xxx文档更新'
commit -m 'style：代码风格调整'
commit -m 'refactor：xxx函数逻辑重构'
commit -m 'test：xxx功能添加测试'
commit -m 'chore：webpack打包模块升级'

代码注释规范

- html
<!-- 头部 -->
<view class="header">
  <!-- LOGO -->
  <image class="logo"></image>
  <!-- /LOGO -->
  <!-- 详情 -->
  <view class="detail"> </view>
  <!-- /详情 -->
</view>
<!-- /头部 -->


- js
// TODO: 待完善
// FIXME: 待优化

普通函数注释：
/**
* add
* @param {Number} a - 数字
* @param {Number} b - 数字
* @returns {Number} result - 两个整数之和
*/
function add(a, b) { // FIXME: 这里要对 a, b 参数进行类型判断
  let result = a + b
  return (result)
}

构造函数注释：
class Kun {
  /**
  * @constructor
  * @param {Object} opt - 配置对象
  */
  constructor(opt = {}) { // 语句注释 this.config = opt
  }
}

命名规范

目录命名：小驼峰方式命名
页面命名：小驼峰方式命名
组件命名：大驼峰方式命名
图片命名：用途+描述，多个单词用下划线隔开，如login_icon

组件的使用

● 使用时以v-开头
● 命名遵循组件命名规范
● 推荐使用单标签闭合

<v-BaseButton :data="data"/>
<script>
 export default{
     components:{
         "v-BaseButton":BaseButton
     }
 }
</srcipt>

vue组件划分

● 页面组件
● 不包含业务，独立，具体功能的基础组件
● 业务组件