前端项目开发规范

前端项目开发规范

一 、vue项目名、所有文件名命名统一使用kababa-case命名方式，也就是所有文件名都是小写，或者短横线的方式

二、css命名及使用规范

1、css中的类名使用小写字母，以中划线分割 。例：

2、id采用驼峰命名

3、省略0后面的单位

三、js规范

1、采用小写驼峰 如:studyJavascript

2、常量命名全部用大写，单词间用分割线隔开 如：MAX_STOCK_COUNT

3、字符串统一使用’ ‘(单引号)，不实用双引号（" "）,这在创建HTML字符串非常有好处。如. let str=‘foo’;lettestDiv=’<divid=“test”>’

4、优先使用ES6+中新增的语法糖和函数来简化程序。如箭头函数，await/async,解构，let，for…of等

5、永远不要直接使用undefined进行变量判断；使用typeof和字符串’undefined’对变量进行判断。例：if (typeof person===‘undefined’){…}

四、Vue项目规范

1、组件文件名用 kabab-case（短横线），组件名使用PascalCase(大驼峰)

2、当在组件中使用data属性的时候（除了new Vue外的任何地方），它的值必须是返回一个对象的函数，因为如果直接是一个对象的话，子组件之间的函数值会相互影响。

3、props定义应该尽量详细

. 必须使用camelCase驼峰命名

. 必须指定类型

. 必须加上required或者default，两者2选1

.如下所示

     props:{.
        //组件状态，用于控制组件的颜色
     status:{
       type:String,
       required:true,
       validator:function(value){
           return['succ','info','error'].indexOf(value)!==-1
           }
      }                 

4、指令都推荐缩写

指令推荐都使用缩写形式，(用:表示v-bind:、用@表示v-on:和用#表示v-slot:)

5、script标签内部结构顺序

name>components>mixins>props>data>computed>watch>filter>钩子函数（钩子函数按其执行顺序）>method

6、路由传参

let id='123';
this.$router.push({name:'userCenter',query:{id:id}}

7、路由懒加载

{
   path:'/uploadAttachment',
   name:'uploadAttachment',
   meta:{title:'上传附件'},
  component()=>import('@/view/components/uploadAttachment/index.vue')
}