前端样式规范
# 一、命名规则
1.目录名全部小写,srcs下层目录使用复数形式。
2.图片字体影音等资源文件名称全部小写或者全部大写,使用下划线_连接。
3.除了约定俗成的文件名,代码类文件名称使用驼峰式命名。
4.css的class名称全部小写,使用中划线-连接。
5.js中常量名称全部大写,使用下划线_连接,变量(包括方法名称)使用驼峰式命名。
# 二、CSS书写规范
1.因为Vue.js的单页面特性和组件的复用特性,css中尽量不要使用id,而是使用class代替。
2..vue文件中使用style必须加scoped,防止样式冲突。
3.跨组件/插件样式使用[.本页面class >>> .组件/插件class]的形式书写css选择器。
4.图片引用多种方式都可以,但是如果引用static目录下图片,请记得验证编译后是否正常显示。
5.全局样式文件可以放在main.js引入,其他样式在单独页面引入。
# 三、JS书写规范
1.除了服务器端编译文件和部分特殊情况,js文件统一使用import和export对接组件/插件。
2.通用方法写在单独的utils.js中,在main.js中使用Vue.prototype.$utils = utils挂载。包括一些常量等,都可以这样处理。
3.Vue.js中的全局过滤器、指令等,在main.js中直接加载。全局组件方法使用Vue.use在main.js中加载。部分页面通用组件方法,可以在单独页面使用mixins加载。
4.代码中尽量避免if(...){..} else if(...){...} else if(...){...}的存在,使用if(..){ ... return} if(..){ ... return} ...的逻辑。
5.尽量避免递归函数的调用,如果必须使用,使用let定义变量,不要使用var。
6.注意this的指向,可以通过箭头函数避免this的改变。
# 四、Vue.js书写规范
# 4.1单个.vue文件书写规范
1.原则上Vue.js中不要进行dom操作。
2.不要使用setTimeout(...,0)来处理冲突,使用$nextTick替代。
3.data中的复杂数据,当只需要改变部分值而不是值引用的时候,需要使用$set来赋值。
4.除了特殊逻辑(例如组件传值),页面初始化数值的方法写在mounted(非缓存页面)或者activated(缓存页面)中。
5.设置组件/插件原生方法,记得加上.native,例如@click.native@mouseover.native等。但是插件自定义的方法是不需要的。部分插件会自定义例如@change@focus方法等,注意查看api文档。
6.组件设置属性的时候,非字符串需要使用:XX="false"的形式,如果使用:形式传递字符串,请加引号,例如:XX="'false'"。
# 4.2 Vue.js组件相关规范
1.尽量使用组件的形式来复用代码和解耦合。
2.简单的子组件向父组件传值使用$emit,复杂的传值尽量使用Vuex,使用computed获取实时改变的值。
# 4.3 Vuex和VueRouter相关规范
1.实时状态尽量使用Vuex处理,但是注意Vuex内的数据刷新后就会消失,需要缓存的数据仍然需要使用sessionStorage和localStorage。
2.VueRouter请使用() =>import('@/xxx/xxx')或者resolve => require(['@/xxx/xxx'], resolve)的形式懒加载页面。
3.请使用动态路由来处理页面权限。通常意义上的动态路由是指路由跳转时候动态匹配用户权限。此外可以使用addRouters方式实时加载路由。后者是真实意义上的动态路由。
# 4.4 Webpack相关规范
1.打包时候根据情况拆分js文件,不要将全部内容打包到vendors.js中。
2.对于图片字体影音等资源文件,打包时候注意限制大小,太大的文件不要打到js中。
3.对于提取出来的图片字体影音,包括css文件等,为了部署方便,请使用相对目录处理publicPath。