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)
推荐阅读,请笑纳
行星故事 行星故事 2017-09-23

陈年旧事

怀念他们

收藏 1 推荐 1 评论 3 阅读 579
行星故事 行星故事 2017-09-23

陈年旧事

说来也很奇怪,小时候往事这么多,可是每次回想浮现在眼前的,经常是这么一件事。我家是住在湛江一个边缘农村的,那里的天气炎热,特别是夏天这个时候。农村里的夏天,特别是八、九月份,很是忙碌,因为家家户户都是耕农的,这是个丰收的季节。那一年也是不例外的,在这给季节里,每一家人都是赶早就起床了。牛拉着车格叽格叽就往田去,准备割掉那些稻谷。每次出门的时候,我家那一群小猫总是会围着我转来转去的,这个已经成为了一种习惯。这些猫咪刚出生不久的,很是可爱,这些都是我家母猫的功劳。然而,当天就不陪它们玩了,一家人就去了田里。从早上到下午,我们都是在那里的,中午在那里吃带过来的饭菜,所以在三点左右就可以收割完回家了。记忆里的那个时候太阳很晒很晒,已经湿透了。我家的老牛拉着满满一车的稻谷,艰难而慢慢的回到了家里,让它在树荫下喝水,我们边还有其他的事做去了。其实那个时候还小,跟着去田里也没有什么事让自己做的,只是去看看老牛不要偷吃了别人家的稻谷,还有蔬菜。其实我也很喜欢这样的,因为家里其他人去收割

收藏 1 推荐 1 评论 3 阅读 780
行星故事 行星故事 2017-09-25

写你的名字,我的姓氏

我和你之间,爱情清澈得像布满鹅卵石的泉水那样,像透明得看清脉络的小鱼那样,却又像那或有或无的粼粼波光,时而穿透心房,时而似透明的空气。纯洁、希盼拥抱着我们的爱情,愿望是流星飞逝牵起的一条红线。2015/06/01

收藏 2 推荐 2 评论 7 阅读 1146

一如少年

一如年少模样,苦旅抑或迷香,欢喜抑或坠亡,你要去的地方,遗情处有诗章,更行更远还唱,沿途避走齐脖的深草,和滚落衰亡的陡坡,给蹭过车的老司机递烟解乏,不惦记竹筒盛雨露的事儿,你要爱荒野上的风声,胜过爱贫穷和思考,暮冬时烤雪迟夏写长信,早春不过一棵树。

收藏 0 推荐 0 评论 2 阅读 768

延长

我眼中的星空挂着一座长长的桥,横跨着遥远的地方,心里也好,梦中也好,我依然能涉足。

收藏 1 推荐 1 评论 1 阅读 523
行星故事 行星故事 2017-09-28

还好我们依旧那么美好

在空间上面看到同学的一条对相片的评论,他说,大家都已经变得沧桑了许多。看这句话,忽然感觉鼻子酸酸的。我们都已经被时光磨成这样了吗?然后,我就反反复复地看着这张照片,仔细地看着里面一张张熟悉又陌生的面孔,熟悉的还是当年的那个人,熟悉的还是我认识的那些人,熟悉的是我们依旧在一起那么美好,却不曾发觉的是,我们已经有了陌生的面容,陌生的是笑声依旧不再是那么稚嫩,或许这是我们当时希望的样子,希望长大的样子,希望可以让人不再说自己是那么嫩,小学生似的,原来我们的笑声里已经有了沧桑的模样,即使现在不是我们希望的模样,我知道现在真的不是我们希望的模样,也许现在希望有的是当时的稚嫩,当时的幼稚,当时不知天高地厚的突然大笑。陌生的是,我们真的在时间的催促中渐渐长大,长成都不是我们当时梦中的模样。还好的是,我们依旧是那么美好的在一起笑得那么开心,即使有了沧桑的声音,或许这是证明了我们也曾经在时间里面度过,在里面成长,成熟了。我知道,有哪个人没有成长呢,不会经历过挫折和某段时间的折磨。我觉得我们都是

收藏 0 推荐 0 评论 0 阅读 557
行星故事 行星故事 2017-09-30

一言一句一人生

你已经是个大人了,应该懂得如何区分清楚生活和爱情之间的关系,生活不是为了爱情而生,而爱情却是基于生活依存。你可以有一段糟糕的爱情,但不能放纵自己过一个烂透的人生。

收藏 5 推荐 1 评论 2 阅读 991
行星故事 行星故事 2017-09-30

写你的名字,我的姓氏

我居住在你心房柳丝般的柔情、棉花糖般的甜蜜

收藏 2 推荐 2 评论 7 阅读 1168
行星故事 行星故事 2017-09-30

一言一句一人生

世间最好的默契并非有人懂你的言外之意而是有人懂你的欲言又止希望有人懂你的低头不语小心翼翼守护你的孩子气愿你找到一个像太阳一样的人为你晒掉所有不值一提的悲伤

收藏 5 推荐 1 评论 2 阅读 966
行星故事 行星故事 2017-10-03

一言一句一人生

想替你掐掉手中的烟,挡住你手里的酒,我不想你除了孤独,一无所有。

收藏 5 推荐 1 评论 2 阅读 956