VUE开发规范-前端规范

  

VUE开发规范 

基于 vue 官网代码风格 https://cn.vuejs.org/v2/style-guide/

template

在模版文件中,你应该遵守 HTML 的书写规范

1、标签语义化,切忌清一色的 div 元素。列表可以使用 ul li,文字使用 p 标签,标题使用 h* 标签,等等。 HTML5 推出了语义化的标签,建议使用:section,aside,header,footer,article,等 HTML5 布局标签。

2、样式 class 的命名:以小写字母开头,小写字母、中划线和数字组成。不建议使用驼峰法命名 class 的属性。以下是一些常用到的 class的名字。

包裹层: .xx-wrap; 列表: .xx-list; 列表项: .xx-list-item; 左边内容: .xx-left; 中间内容: .xx-middle; 右边内容: .xx-right; 某个页面: .xx-page;

3、自定义标签:使用自闭标签的写法。例如:<my-owner-components/>参考这里

4、多特性,分行写,提高可读性。示例代码如下,具体原因 看这里

<scroll
    ref="scrollWrap"
    :data="homeData"
    :pullDownRefresh="true"
    :pullUpLoad="true"
    class="home-scroll-warp"
    @pullingDown="pullingDownGetNewData"
    @pullingUp="pullingUpGetMore"
/>

5、模版中使用表达式,复杂情况使用计算属性或函数参考这里

script

在 script 标签中,你应该遵守 Js 的规范

1、在 script 标签的最顶部,引入文件

2、vue-cli 脚手架使用架自带的指向 src 开发目录的 '@' 符号引入文件资源。

3、引入组件,命名使用:首字母大写的驼峰法命名。推荐使用 ES6 的方式引入:

import Article from 'xxx'
import ArticleDetail from 'xxx'

4、组件的选项,根据官方的推荐按照以下定义

<script>
  export default {
    name: 'ExampleName',  // 这个名字推荐:大写字母开头驼峰法命名。
    props: {},            // Props 定义。
    components: {},       // 组件定义。
    directives: {},       // 指令定义。
    mixins: [],           // 混入 Mixin 定义。
    data () {              // Data 定义。
      return {
        dataProps: ''     // Data 属性的每一个变量都需要在后面写注释说明用途,就像这样
      }
    },
    computed: {},         // 计算属性定义。
    created () {},         // 生命钩子函数,按照他们调用的顺序。
    mounted () {},         // 挂载到元素。
    activated () {},       // 使用 keep-alive 包裹的组件激活触发的钩子函数。
    deactivated () {},     // 使用 keep-alive 包裹的组件离开时触发的钩子函数。
    watch: {},            // 属性变化监听器。
    methods: {            // 组件方法定义。
      publicbFunction () {}  // 公共方法的定义,可以提供外面使用
      _privateFunction () {} // 私有方法,下划线定义,仅供组件内使用。多单词,注意与系统名字冲突!
    }
  }
</script>

5、Data 必须是一个函数参考这里

6、Props 定义细则参考这里

7、为 v-for 设置 key 值参考这里

8、使用计算属性规避 v-if 和 v-for 用在一起参考这里

style

样式部分,因为样式有原生的 CSS 写法,也有使用预处理语言:Sass, Less,Stylus。所以情况比较多,也比较复杂。项目统一使用 Sass

1、使用 scoped 关键字,约束样式生效的范围参考这里

2、组件内部需要覆盖UI框架样式,必须在最外层组件加类名

<template>
  <div class="input-area-container">
    <el-input class="name-input"></el-input>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss">
.input-area-container {
  .name-input {
    .el-input__inner {
      font-size: 16px;
    }
  }
}
</style>

3、项目统一使用 Sass

4、避免使用标签选择器。因为这个在 Vue 中,特别是在局部组件,效率特别低,损耗性能,建议需要的情况,直接定义 class。参考这里

5、非特殊情况下,禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。

6、CSS 属性书写顺序:先决定定位宽高显示大小,再做局部细节修饰
推荐顺序:定位属性(或显示属性,display)->宽高属性->边距属性(margin, padding)->字体,背景,颜色等,修饰属性的定义。

这样定义为了更好的可读性,让别人只要看一眼就能在脑海中浮现最终显示的效果。以下给出常用的定义示例:

.class-name {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
    color: #000;
    background-color: red;
    border-radius: 2px;
    line-height: 1.42;
}

命名规范

驼峰式命名法介绍
Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo
Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

文件资源命名

文件名不得含有空格
文件名建议只使用小写字母,不使用大写字母。( 为了醒目,某些说明文件的文件名,可以使用大写字母,比如README、LICENSE。 )
文件名包含多个单词时,单词之间建议使用半角的连词线 ( - ) 分隔。

css

javascript

变量命名

命名方式: 小驼峰式命名方法
命名规范: 类型+对象描述的方式,如果没有明确的类型,就可以使前缀为名词
函数
命名方式:小驼峰方式 ( 构造函数使用大驼峰命名法 )
命名规则:前缀为动词
动词 含义 返回值
can 判断是否可执行某个动作 ( 权限 ) 函数返回一个布尔值 true:可执行;false:不可执行
has 判断是否含有某个值 函数返回一个布尔值 true:含有此值;false:不含有此值
is 判断是否为某个值 函数返回一个布尔值 true:为某个值;false:不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象

//是否可阅读
function canRead() {
    return true;
}
//获取姓名
function getName {
    return this.name;
}
常量

命名方法:全部大写
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
推荐:

const MAX_COUNT = 10;
const URL = 'http://www.baidu.com';

注释规范

1、公共的函数方法、常量和重要变量的定义

2、业务系统中,晦涩难懂的需求

3、多步骤的流程。最好用1,2,3,4··· 标明顺序

4、复杂的算法

注释的格式

HTML注释

在 html 中主要使用的注释方式就只有一个:<!-- write your HTML comment! -->

注意在注释的前后各有一个空格。

CSS注释

在 CSS 中,注释的方式主要有:/* write your CSS comment! */ 和 // 这是注释

注意在注释的前后各有一个空格。

Javascript

在 JS 中,因为注释的东西,内容比较多,按照前面列出的功能,分别说明。

行级注释

行级注释就是指的双正斜线后面的内容,双线后面需呀放置一个空格

// 正确的注释
//错误的注释,双斜线后面没有空格
变量声明注释

1、如果是在类似 Vue 项目的 data 属性中的变量,直接用行级样式跟在后面

data () {
  return {
    rightExample: 'yes', // 注释直接写这里
    // 我是 errorExample 变量的注释,错误形式
    errorExample: 'no'
  }
}

2、如果是在类,构造函数,或者常量定义中的变量,使用块级注释

/**
* 错误码常亮定义
* @type {number}
*/
const ERR_CODE = 0
函数声明注释

不必要在每一个函数都写注释,但是在公共函数,还是建议补全注释,让后面的人不需要重复造轮子。

函数头注释中必须写以下内容

  • 函数的功能
  • 函数的入口参数类型
  • 函数的返回值类型
  • 函数的算法或者业务逻辑
/**
 * 获取 DOM data 属性的值
 * @param {DOM} el dom对象
 * @param {String} name 需要获取属性的名字
 * @param {String, Number} val 可选,存在是表示设置属性的值
 * @returns {String}
 */
function getData (el, name, val) {
  const prefix = '>  let prop = prefix + name
  if (val) {
    el.setAttribute(prop, val)
  } else {
    return el.getAttribute(prop)
  }
}

参考资料:
https://jingyan.baidu.com/article/3ea51489abc0f152e61bba2e.html
https://www.jianshu.com/p/1a0cf697b9bb

项目配置

1、新项目统一采用vue-cli3.0脚手架 https://cli.vuejs.org/zh/
2、必须开启 eslint 代码检查, 统一采用standard风格 https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md#javascript-standard-style
3、推荐使用 vscode 编辑器

目录构建规范

── project-name
   ├── public                    项目公共目录
   │   ├── favicon.ico               Favourite 图标
   │   └── index.html                页面入口 HTML 模板
   ├── src                       项目源码目录
   │   ├── main.js                   入口js文件
   │   ├── App.vue                   根组件
   │   ├── api                       把所有请求数据的接口,按照模块,写在单独的 JS 文件中
   │   │   ├── home.js                   首页接口
   │   │   ├── detail.js                 详情页接口,等等
   │   │   ···
   │   ├── assets                    静态资源目录,公共的静态资源,图片,字体等
   │   │   ├── fonts                     字体资源
   │   │   ├── images                    图片资源,该文件夹下还可以按照功能或模块做更细的划分
   │   │   ···
   │   ├── common                    公共脚本,样式,配置,等动态信息
   │   │   ├── js                        公共脚本
   │   │   │   │── utlis.js                  公共 JS 工具函数
   │   │   │   │── config.js                 公共配置
   │   │   │   ···
   │   │   ├── style                 公共样式,可以是各种预处理语言
   │   │   │   │── index.css                样式主文件
   │   │   │   │── reset.css                重置样式
   │   │   │   ···
   │   │   ···
   │   ├── components                公共组件目录
   │   │   ├── confirm                   弹框组件
   │   │   │   └── index.vue
   │   │   ├── scroll                    局部内容滚动组件
   │   │   │   └── index.vue
   │   │   ···
   │   ├── http                      封装的 HTTP 请求方法
   │   │   ├── axios.js                  Axios 的封装
   │   │   ···
   │   ├── store                     数据中心
   │   │   ├── state.js                  state 数据源,数据定义
   │   │   ├── mutations.js              同步修改 state 数据的方法定义
   │   │   ├── mutation-types.js         定义 Mutations 的类型
   │   │   ├── actions.js                异步修改 state 数据的方法定义
   │   │   ├── getters.js                获取数据的方法定义
   │   │   └── index.js                  数据中心入口文件
   │   ├── routes                    前端路由
   │   │   └── index.js
   │   └── views                     页面目录,所有业务逻辑的页面都应该放这里
   │       ├── home                      应用首页
   │       │   └── index.vue
   │       ···
   ├── .env.development              Vue 开发环境的配置
   ├── .env.production               Vue 生成环境的配置
   ├── .eslintrc.js                  Eslint 配置文件
   ├── .gitignore                    Git 忽略文件
   ├── package.json                  包依赖文件
   ├── package-lock.json             依赖包版本管理文件
   ├── README.md                     项目介绍
   ├── vue.config.js                 vue/cli 项目脚手架配置
   ···

src 文件说明

1、src/api 模块的请求方法。应该参考 src/views 中的直接子文件夹的结构,做映射。

2、src/assets 项目的静态资源文件。虽然是静态文件(图片,字体,等),但是还是经过 webpack 处理会好一些,因为有些比较小的文件会被打包到文件,减少请求和压缩第三方包。这个模块的文件,如果还需要扩展,一个单词作为文件夹名字!保持简洁性。

3、src/common 公共的动态的脚本、样式。在实际中,样式可能是各种预处理语言写的,请自行组织目录结构。

4、src/components 公共组件。放置项目中抽象的基础和业务组件。你应该为每个组件都单独建一个文件夹,以做好组件之间的隔离,并且有一个默认的文件:index.vue 文件,以便引入组件时少写几个字母。默认组件中的文件是一个最小的单位,不应该有依赖其他组件,或操作 state 状态等行为。

5、src/http 主要是关于请求方法的封装。建议开发过程中不要修改,因为会影响到全局。

6、src/store 数据中心。这部分内容比较多,独立出来,详情参考:数据中心

7、src/router 页面路由。默认所有路由映射写在一个文件,如果需要路由模块化,请自行组织。

8、src/views 所有业务逻辑的页面

文件命名规范

1、所有文件和文件夹,统一使用:小写字母开头,英文中划线分隔的方式命名。必须遵守

2、组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾参考这里

目录设计是按照功能划分成一个文件夹,以便于满足日后功能扩展的需要。同时也保证目录的简洁,可读性。
注意:这个是 vue/cli 3.0 以上脚手架的目录结构,与 2.0 之前的可能会有一点点差别,但是主要的 src 开发目录是差不多的,可以用作参考。

插件规范

1、统一常用插件/工具/库

说明:无特殊情况统一用以下插件/工具/库

css预处理器: sass
图表:vue-echarts https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh_CN.md
日期处理工具:dayjs https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/API-reference.md
UI框架:element-ui https://element.eleme.cn/#/zh-CN/component/layout

  

120 字之内
全部评论(0)
推荐阅读,请笑纳

羊脂球(三)

在他俩身边坐着一个比较高贵的人,属于一种高尚阶级的迦来-辣马东先生,他是个被人重视的人物,以棉业起家,产业是3个纺织厂,曾得荣誉军团官长勋章,现充州参议会议员。在整个帝政时代,他始终是个善意反对派的领袖,根据他本人的说法,他是只用无刃的礼剑作战的,先攻击对方,再附和几声,以便索取高价的酬报。迦来-辣马东太太比她丈夫年轻得多,素来是卢昂驻军中出身名门的官长的“安慰品”。她和丈夫相对,显得很娇小,很玲珑,很漂亮,身上裹着皮衣,用一种颓丧的眼光望着车子内部的凄惨景象。他俩的身边是禹贝尔-卜来韦伯爵两夫妇,他们出身于诺曼底的最古老又最高贵的一个世家。伯爵是个气派雍容的老绅士,他尽力修饰自己的服装以加重他和亨利四世的天然相似之点,根据他家庭里的一种光荣传说,亨利四世曾经使得卜来韦家一位夫人怀了妊,她的丈夫因此被封为伯爵,又做了本省的巡抚。&n

收藏 0 推荐 0 评论 0 阅读 403

羊脂球(四)

不过鸟老板却用眼睛死死盯着那只盛子鸡的瓦钵子。他说:“真好哟,这位夫人从前比我们考虑得周到。有些人素来是什么都会想到的。”她抬头向着他说:“您可是想吃一点,先生?从早上饿到现在是够得受的。”他欠一欠身子:“说句真心话。我不拒绝,我再也受不住了。打仗的时候是打仗的样子,可对,夫人?”末后,他向周围用眼光归了一圈接着说:“在这样一种时候,遇见有人为自己帮忙是很快活的。”他带了一张报纸,现在为了不至于弄脏裤子就把它打开铺在两只膝头上,接着再从口袋里取出一柄永不离身的小刀,扳开它用尖子挑着一只满是亮晶晶的胶冻的鸡腿,他用牙齿咬开了它,再带着一阵很明显的满意来咀嚼,使得车子里起了一阵伤心的长叹。但是羊脂球用一道谦卑而甜美的声音邀请两个嬷嬷来分尝她的便餐。她俩立即接受了,在含糊道了谢之后,并没有抬起眼睛就很快地吃起来。戈尔弩兑也没有拒绝他身边这位旅伴的赠与,他和两个嬷嬷在膝头上展开好

收藏 0 推荐 0 评论 0 阅读 367

羊脂球(五)

大家终于坐在饭桌上,这时候,旅馆的掌柜亲自走出来。那原是一个做马贩子的,一个害着气喘病的胖子,他嗓子里始终呼啸,发哑,带着痰响。他父亲传给他的姓氏是伏郎卫。他问道:“哪一位是艾丽萨贝特-鲁西小姐?”羊脂球吃惊了,转过头来回答:“是我。”“小姐,普鲁士军官立刻要和您说话。”“和我吗?”“是呀,倘若您的确是艾丽萨贝特-鲁西小姐。”她摸不着头脑了,思索了一下,随后爽利地说:

收藏 0 推荐 0 评论 0 阅读 404

羊脂球(六)

旅客们本来决定第二天八点起程,所以都看准钟点在厨房齐集,不过车子呢,顶棚上满是积雪,孤零零地停立在天井当中,没有牲口也没有赶车的。有人枉费气力去找他了,无论在马房里,在草料房里或者在车房里都找不着。于是所有的男人都决定到镇上去走一趟,他们出门了。走到了镇上的广场,看见礼拜堂正在广场的尽头,而两旁是许多矮房子,其中有好些普鲁士兵。他们看见的第一个正给马铃薯削皮,第二个,比较远一点的,正洗刷一间理发店,另外一个满脸的长胡子一直连到眼睛边的,吻着一个哭的婴孩,并且搁在膝头上摇着教他安静;好些胖乡下妇人,丈夫们都是属于作战部队的,用手势指点那些顺从的战胜者去做他们应当做的工作,譬如劈柴,给面包浇汤和磨咖啡之类;有一个甚至于替他的女房东,一个衰弱不堪的老祖母洗衣衫。伯爵诧异了,看见有一个礼拜堂小职员正从堂长的住宅里出来就向他探听。那个靠礼拜堂吃饭的耗子回答道:“噢!那些人并不凶恶;据说,那不是普鲁士人。他们都来得远一些,

收藏 0 推荐 0 评论 0 阅读 404

羊脂球(七)

胖掌柜出去了。于是羊脂球被人包围了,被人询问了,被人央求了,所有的人都指望她揭穿普鲁士军官请她谈话的秘密。她开初是拒绝说明的;但是没有多久盛怒激动了她,她叫唤道:“他要的?他要的?他要的是和我睡觉!”谁也不觉得这句话刺耳,因为当时的公愤实在很活跃。戈尔弩兑猛烈地把酒杯向桌上一搁竟打破了它。那是大声斥责这个卑劣丘八的一种公愤,一种怒潮,一种为了抵抗的全体结合,仿佛那丘八向她身上强迫的这种牺牲就是向每一个人要求一部分。伯爵用厌弃的态度声言这些家伙的品行简直像古代的野蛮人。特别是那些妇人对于羊脂球都显示一种有力的和爱抚性的怜惜。两个嬷嬷本来是只在吃饭的时候才出来的,早就低着头什么也没有说。第一阵愤怒平了,那时候他们照旧吃了晚饭,不过话却说得不多;大家计划着。妇人们是早早退出的,男子们吸着雪茄,一面组织另外一种比较具有赌博性的牌局,邀请了伏郎卫先生参加,他

收藏 0 推荐 0 评论 0 阅读 416

羊脂球(八)

故事到末了真教人觉得滑稽,快乐的心情自然而然地发生了。伯爵找着那些趣味略辛辣的诙谐,不过叙述得非常之好只教人微笑。轮到了鸟老板,他发挥了三五段比较生硬的猥亵之谈,大家都简直不以为刺耳;后来他妻子粗率地发表的意见取得了全体的认可,她说:“既然那是这个‘姑娘’的职业,为什么她可以拒绝这一个比拒绝另一个厉害?”和蔼的迦来-辣马东夫人仿佛想起自己若是处于羊脂球的地位,那么她拒绝这个军官可以不及拒绝旁的一个人厉害。他们如同对于一座被攻的炮台一般长久地预备包围的步骤。每一个人都接受了自己将要扮演的角色,都接受了自己将要倚仗的论据,都接受了自己将要执行的动作。他们决定如何去进攻,种种可用的诡谋和冲锋的奇袭,去强迫这座有生命的堡垒在固有的阵地接待敌人。然而戈尔弩兑是待在一旁的,完全和这一次的事件无关。一种很深刻的注意使得大家的头脑都是紧张的,以至于没有听见羊脂球正

收藏 0 推荐 0 评论 1 阅读 442

羊脂球(九)

随后她问嬷嬷了:“嬷嬷,那么您认定上帝容许一切方法,而在动机纯洁的时候上帝是原谅行为的?”“谁能够怀疑这一层,夫人?一个在自己认为可以谴责的行为,每每由于使它感受的思想而变成值得称赞的。”她俩这样继续谈下去,讨论上帝的种种意志,预料他的种种决策,替他和好些真的不大和他有关的事拉上了关系。这一切议论都是含蓄的,巧妙的,慎重的,不过这个戴着尖角风帽的圣女的每一句话,都使那个出卖风情的女人的愤怒抵抗力受到了损伤。随后,谈话略略转换了方向,手挽念珠的女人谈到她会里的那些修道院,谈到她的院长,谈到她本人又谈到她那矫小的同伴汕尼塞傅尔嬷嬷。有人从哈佛尔找她们去看护各医院里的好几百个出天花的士兵。她描绘那些可怜的人,详细说明他们的病状。而这时候她们在路上偏偏被这个普鲁士人的坏脾气扣住不教走,所以有许多可能由她们救出来的法国士兵

收藏 0 推荐 0 评论 0 阅读 456

羊脂球(十)

戈尔弩兑一直没有说一句话,没有做一个手势,并且像是沉没在一些很严肃的思想里,偶尔用一个气忿得很的动作捋着自己的长胡子如同想再拉长一点似的。末了,在12点光景人都快要分手的时候,鸟老板正晃着身子摇摇摆摆,忽然拍着戈尔弩兑的肚子一面结结巴巴向他说:“您并不开开玩笑,今天晚上,您什么也不说吗,公民?”但是戈尔弩兑突然抬起了脑袋,用一阵亮得怕人的眼光向全体扫视了一周,他说:“我说你们各位刚才都做了一件很可耻的事!”他说完站起来,走到了门口又说一遍,“一件很可耻的事!”末了他走了。开初,这像是对他们泼了一头的凉水,鸟老板吃了一惊呆呆地待着,不过随后他恢复了稳定态度,突然弯着身子笑起来一面重复地说:“他们都太大意了,老朋友,他们都太大意了。”这时候,人们都不懂得他的意思,于是他叙述了“过道里的秘密”。这样使大家重新哄堂地大笑了一阵。那些贵妇人快活得如同痴婆子似的。伯爵和迦来-辣马东先生连眼泪都笑出来。他们简直不能相信

收藏 1 推荐 0 评论 0 阅读 445
前沿攻略 前沿攻略 2018-09-25

vue 手机号,邮箱,车牌号等认证规则

先讲使用规则如下:Vue.prototype.$rules=validator;用法:

收藏 0 推荐 0 评论 0 阅读 398
音乐达人 音乐达人 2018-09-25

禁止悲伤

《禁止悲伤》是许茹芸演唱的一首歌曲,收录于专辑《真爱无敌》由方文山填词爱人的感觉可以很简单如果你的关怀不要求还只是在一个人面对回忆的夜晚付出最多的人最不勇敢被爱的感觉总有些不安怕给爱的人最后给难堪说谎过后的天空怎么看都好脏你的离开只有个答案那就是背叛泪水被

收藏 0 推荐 0 评论 0 阅读 509