1. 前端规范

前端采用Vue.js开发， 采用的规范如下

基于组件化开发理解

• 什么是组件？

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

• 组件化开发的好处

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

• 组件化和模块化的区别

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

• 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.单行注释使用//；

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照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 使用完及时删除
    

2 . 后端规范

后端采用Python+Django ，规范如下

缩进

• 统一使用4个空格进行缩进

行宽

每行代码尽量不超过80个字符(在特殊情况下可以略微超过80，但最长不得超过120)

理由：

• 这在查看side-by-side的diff时很有帮助
• 方便在控制台下查看代码
• 太长可能是设计有缺陷

引号

简单说，自然语言使用双引号，机器标示使用单引号，因此代码里多数应该使用单引号

空行

• 模块级函数和类定义之间空两行；
• 类成员函数之间空一行；

编码

• 文件使用UTF-8编码

import语句

• import语句应该分行书写
• import语句应该使用 absolute import
• import语句应该放在文件头部，置于模块说明及docstring之后，于全局变量之前；
• import语句应该按照顺序排列，每组之间用一个空行分隔
• 导入其他模块的类定义时，可以使用相对导入
• 如果发生命名冲突，则可使用命名空间

空格

• 在二元运算符两边各空一格 [=,-,+=,==,>,in,is not, and]:
• 函数的参数列表中，,之后要有空格
• 函数的参数列表中，默认值等号两边不要添加空格
• 字典对象的左括号之前不要多余的空格

换行

Python支持括号内的换行。这时有两种情况。

• 第二行缩进到括号的起始处
• 第二行缩进4个空格，适用于起始括号就换行的情形
• 禁止复合语句，即一行中包含多个语句：
• if/for/while一定要换行：

注释

块注释

• “#”号后空一格，段落件用空行分开（同样需要“#”号）

行注释

• 至少使用两个空格和语句分开，注意不要使用无意义的注释

命名规范

• 应避免使用小写字母l(L)，大写字母O(o)或I(i)单独作为一个变量的名称，以区分数字1和0;
• 包和模块使用全小写命名，尽量不要使用下划线
• 类名使用CamelCase命名风格，内部类可用一个下划线开头
• 函数使用下划线分隔的小写命名
• 当参数名称和Python保留字冲突，可在最后添加一个下划线，而不是使用缩写或自造的词
• 常量使用以下划线分隔的大写命名

参考资料

VUEJS开发规范

Django 编码规范