Vue项目的代码构建风格规范

版权声明:转载请联系作者,并保持署名! https://blog.csdn.net/six_six_six_666/article/details/82559919

VUE的项目命名规范

概述:当团队有几个人同时开发一个项目的时候一定要事先规范好大家的代码风格,最好能用Eslint等工具规范一起写作。这里分享一些自己在工作中认为比较好的约定。

具体内容

一下的描述仅仅针对Vue开发的项目

  • 1、在data中:

    1-1、Boolean 类型,用于控制元素的显示隐藏,统一用“is”开头,比如:isShowLoading
    
    1-2、Form表单类,同一个表单使用的数据,统一用一个对象包裹
    
  • 2、在created()中:

    2-1、获取数据一定抽象写成方法,然后一般使用的是私有方法,比如:this._getUserInfo()
    
    2-2、做一些初始化的工作,这里创建的变量不是响应式的,不会被监听,有好有坏,自己看着用
    
  • 3、在mounted()中:

    3-1、这里是created之后的下一个钩子,可以做请求数据之后的页面其他逻辑
    
  • 4、在beforeDestory()中:

    4-1、这个钩子里面,函数的组件什么还没有被销毁,可以做挽留用户的操作
    
  • 5、在destory()中:

    5-1、这个钩子里组件已经被销毁,可以做清除定时器等,回收资源的操作
    
  • 6、常量约定:

    6-1、在顶部用全部大写定义,下划线分隔。一些固定不变,可能以后要维护的值,最好定为常量
    
  • 7、activated()中:

    7-1、当时用了 keep-alive 包裹的容器时,这个在 mounted() 后面的钩子会非常有用,因为DOM会被缓存的原因,其他钩子知会触发一次,因此在这里做操作再合适不过了
    

    8、deactivated() 中:

    8-1、这里可以做一些用户离开时的重置操作
    

    9、其他:

    9-1、请求数据返回的值统一称为:res
    
    9-2、CSS样式时,属性的编写优先级:高->低,比如:定位属性(或显示属性,display)->宽高属性->边距属性(margin,padding)->字体,背景,颜色等等修饰属性,这样更方面自己阅读,不是为了什么。
    

持续更新中…

注:这些东西不是写代码必须的,但是有一套自己的原则组织代码,这会帮助你在工作中事半功倍的效果,哈哈,希望大家以后写代码多多注意!

更新历史
发版:2018/09/09 16:51

猜你喜欢

转载自blog.csdn.net/six_six_six_666/article/details/82559919