VUEJS开发规范

  1. 基于组件化开发理解
  2. 组件命名规范
  3. 结构化规范
  4. 注释规范
  5. 编码规范

基于组件化开发理解

  • 什么是组件?


    组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融化,变成一个完整的应用。
    页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。
  • 组件化开发的好处


    提高开发效率
    方便重复使用
    简化调试步骤
    提升整个项目的可维护性
    便于协同开发
    使其高内聚,低耦合,达到分治与复用的目的。
  • 组件化和模块化的区别


    组件化是从产品功能角度进行分割,模块化是从代码实现角度进行分割,模块化是组件化的前提和基础。
  • Vue组件化开发


    单文件系统,样式局部作用域
    基本组成结构:<template/> <script/> <style scoped/>
    组件注册方式:1)公共组件全局注册 2)其余组件局部注册

组件命名规范

Vue官方文档给予以下说明:


当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。
PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

命名可遵循以下规则:


1、有意义的名词、简短、具有可读性
2、以小写开头,采用短横线分割命名
3、公共组件命名以公司名称简拼为命名空间(app-xx.vue)
4、文件夹命名主要以功能模块代表命名
同时还需要注意:必须符合自定义元素规范: 使用连字符分隔单词,切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名,这样可以方便于其它项目里复用。

结构化规范

  • 基于Vue-cli脚手架的结构基础划分

       ├── index.html                      入口页面
    ├── build 构建脚本目录
    │ ├── build-server.js 运行本地构建服务器,可以访问构后的页面
    │ ├── build.js 生产环境构建脚本
    │ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
    │ ├── dev-server.js 运行本地开发服务器
    │ ├── utils.js 构建相关工具方法
    │ ├── webpack.base.conf.js wabpack基础配置
    │ ├── webpack.dev.conf.js wabpack开发环境配置
    │ └── webpack.prod.conf.js wabpack生产环境配置
    ├── config 项目配置
    │ ├── dev.env.js 开发环境变量
    │ ├── index.js 项目配置文件
    │ ├── prod.env.js 生产环境变量
    │ └── test.env.js 测试环境变量
    ├── mock mock数据目录
    │ └── hello.js
    ├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
    ├── src 项目源码目录
    │ ├── main.js 入口js文件
    │ ├── App.vue 根组件
    │ ├── components 公共组件目录
    │ │ └── title.vue
    │ ├── assets 资源目录,这里的资源会被wabpack构建
    │ │ ├── css 公共样式文件目录
    │ │ ├── js 公共js文件目录
    │ │ └── img 图片存放目录
    │ ├── routes 前端路由
    │ │ └── index.js
    │ ├── store 应用级数据(state)
    │ │ └── index.js
    │ └── views 页面目录
    │ ├── hello.vue
    │ └── notfound.vue
    ├── static 纯静态资源,不会被wabpack构建。
    └── test 测试文件目录(unit&e2e)
    └── unit 单元测试
    ├── index.js 入口脚本
    ├── karma.conf.js karma配置文件
    └── specs 单测case目录
    └── Hello.spec.js
  • vue文件基本结构

<template>
<div>
<!--必须在div中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
methods: {
},
mounted() { }
}
</script>
<!--声明语言,并且添加scoped-->
<style lang="less" scoped>
</style>
  • vue文件方法声明顺序


    - components
    - props
    - data
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods
    - filter
    - computed
    - watch

注释规范

代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。
以下情况,务必添加注释


1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5.注释块必须以/**(至少两个星号)开头**/;
6.单行注释使用//;
  • 单行注释


    普通方法一般使用单行注释// 来说明该方法主要作用
  • 多行注释


    组件使用说明,和调用说明
    <!--公用组件:数据表格
    /**
    * 组件名称
    * @module 组件存放位置
    * @desc 组件描述
    * @author 组件作者
    * @date 2017年12月05日17:22:43
    * @param {Object} [title] - 参数说明
    * @param {String} [columns] - 参数说明
    * @example 调用示例
    * <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
    */
    -->

编码规范

优秀的项目源码,即使是多人开发,看代码也如出一人之手。统一的编码规范,可使代码更易于阅读,易于理解,易于维护。尽量按照ESLint格式要求编写代码


1.使用ES6风格编码源码
定义变量使用let ,定义常量使用const
使用export ,import 模块化
2.组件 props 原子化
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在
3.避免 this.$parent
4.谨慎使用 this.$refs
5.无需将 this 赋值给 component 变量
6.调试信息console.log() debugger 使用完及时删除

原文地址:https://segmentfault.com/a/1190000012610056

VUEJS开发规范的更多相关文章

  1. vue 开发规范

    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...

  2. 我的公司培训讲义(1):.NET开发规范教程

    这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...

  3. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  4. php与数据库代码开发规范

    php与数据库代码开发规范 1/25/2016 6:00:31 PM php对各类变量命名规范 目录名 文件命名 局部变量命名 使用英文动词名词,用下划线作为单词的分割,所有字母均使用小写 目录 up ...

  5. 【敏捷开发】Android团队开发规范

    这里说的开发规范分成目录规范,项目和包名的命名规范,类,方法,变量和常量的命名规范这几种. 目录规范 目录规范——在开发中整体文件夹组织结构. Requirement——需求文档文件夹 Design— ...

  6. 从零开始编写自己的C#框架(3)——开发规范

    由于是业余时间编写,而且为了保证质量,对写出来的东西也会反复斟酌,所以每周只能更新两章左右,请大家谅解,也请大家耐心等待,谢谢大家的支持. 初学者应该怎样学习本系列内容呢?根据我自己的学习经验,一般直 ...

  7. 从零开始编写自己的C#框架(3)——开发规范(转)

    由于是业余时间编写,而且为了保证质量,对写出来的东西也会反复斟酌,所以每周只能更新两章左右,请大家谅解,也请大家耐心等待,谢谢大家的支持. 初学者应该怎样学习本系列内容呢?根据我自己的学习经验,一般直 ...

  8. Web前端开发规范文档(google规范)

    (Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml  区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...

  9. 从" ThinkPHP 开发规范 "看 PHP 的命名规范和开发建议

    稍稍水一篇博客,摘抄自Think PHP 的开发规范,很有引导性,我们可以将这些规范实践到原生 PHP 中. 命名规范 使用ThinkPHP开发的过程中应该尽量遵循下列命名规范: 类文件都是以.cla ...

随机推荐

  1. bzoj 3028: 食物 生成函数_麦克劳林展开

    不管怎么求似乎都不太好求,我们试试生成函数.这个东西好神奇.生成函数的精华是两个生成函数相乘,对应 $x^{i}$ 前的系数表示取 $i$ 个时的方案数. 有时候,我们会将函数按等比数列求和公式进行压 ...

  2. Bzoj 2502: 清理雪道 有上下界网络流_最小流

    好长时间没有写网络流了,感觉好手生.对于本题,设一个源点 $s$ 和 $t$.1.由 $s$ 向每个点连一条没有下界,容量为无限大的边,表示以该点为起点.2.由每个点向 $t$ 连一条没有下界,容量为 ...

  3. [读书笔记] R语言实战 (五) 高级数据管理

    1. 数值函数 1) 数学函数 2) 统计函数 3. 数据标准化 scale() 函数对矩阵或者数据框的指定列进行均值为0,标准化为1的标准化 mydata <- data.frame(c1=c ...

  4. 小学生都能学会的python(小数据池)

    小学生都能学会的python(小数据池) 1. 小数据池. 目的:缓存我们字符串,整数,布尔值.在使用的时候不需要创建过多的对象 缓存:int, str, bool. int: 缓存范围 -5~256 ...

  5. poj 3420 Quad Tiling (状压dp+多米诺骨牌问题+矩阵快速幂)

    还有这种操作?????? 直接用pre到now转移的方式构造一个矩阵就好了. 二进制长度为m,就构造一个长度为1 << m的矩阵 最后输出ans[(1 << m) - 1][( ...

  6. vue懒加载实现

  7. Set&Map区别Array

    Set&Map区别Array 在Set内部,两个NaN是相等.两个对象总是不相等的.可以用length来检测 四个操作方法: add(value):添加某个值,返回Set结构本身. delet ...

  8. 在Windows系统下搭建Redis集群

    准备工作 需要4个部件:Redis.Ruby语言运行环境.Redis的Ruby驱动redis-xxxx.gem.创建Redis集群的工具redis-trib.rb.使用redis-trib.rb工具来 ...

  9. WinServer-IIS-IIS负载均衡

    安装应用程序路由 提供的服务器的地址必须是可以访问,不然无法进入到下面的这个管理界面 来自为知笔记(Wiz)

  10. spring mvc过滤器filter

    SpringMVC 过滤器Filter使用解析 1.如上所示的spring-web.jar包结构所示, Spring的web包中中提供有很多过滤器,这些过滤器位于org.springframework ...