前端 代码规范

阿里设计规范

国际化处理

!!! 项目中除注释之外 不要出现汉字情况！！！
rules 不要再放在data里了 要放到computed里 因为放在data里不能动态使用message

computed: {
    rules() {
      return {
        label: [
          {
            required: true,
            message:this.$t('placeholder.Please_enter_the_correct_phone_number'),
            trigger: 'blur'
          }
        ],
        
      }
    }
  },

代码格式化问题

vscode安装 Prettier插件 将其设为默认格式化

这个工具能够使输出代码保持风格一致。

注释与命名

样式命名

1. class、id都需小写
2. 命名使用英文，禁止使用特殊字符
3. 名称间隔使用 - 符号
4. 类名命名需要语义化，参考下面的示例：

.wrap{
   }                 //外层容器
 .mod-box{
   }              //模块容器
 .btn-start{
   }            //开始
 .btn-download-ios{
   }     //ios下载
 .btn-download-andriod{
   } //安卓下载
 .btn-head-nav1{
   }        //头部导航链接1
 .btn-news-more{
   }        //更多新闻
 .btn-play{
   }             //播放视频
 .btn-ico{
   }              //按钮ico
 .btn-lottery{
   }          //开始抽奖
 .side-nav{
   }             //侧栏导航
 .side-nav-btn1{
   }        //侧栏导航-链接1 
 .btn-more{
   }             //更多

图片命名

1. 图片名称必须小写，禁止使用特殊字符、中文
2. 使用英文或拼音缩写，禁止特殊字符
3. 名称间隔使用 - 符号
4. 命名需要能体现图片的大概用途

常用示例：

 bg.jpg          //背景图片
 mod-bg.jpg      //模块背景
 sprites.png     //精灵图
 btn-start.png   //开始按钮
 ico-play.png    //修饰性图片

禁止文件名和实际图片内容不符。反面例子：图片名为’weixin-qrcode’，图片内容却是头像。

文件命名

所有文件名统一使用小写，首页命名为index.html html内页，有明显分类的，参考使用以下示例命名，无明确意义的，可用page01.html、page02.html，禁止使用特殊字符，统一使用小写字母
常用命名：

专题名称	        	描述
index.html	  		引导页&首页
main.html	  		首页
news.html			资讯页
newsdetail.html		资讯详情页
raiders.html		攻略页
raidersdetail.html	攻略页详情页
download.html		下载页面
actlist.html		活动列表页面
video.html			视频
cdkey.html	CDKEY	兑换页
wallpaper.html		壁纸页面

按照小驼峰命令，英文单词过长或超出2个以上，可缩略至前四位，如

// 业务统计
approvalStatistical

// 缩略
approvalStat

有复数含义，采用复数命名，如

pages, componets, filters, mixins ，images

组件进行目录划分，目录命名为小驼峰，公用组件加上gd前缀，如

|components
|-- gdCustomCheck
|   |--