前端开发规范

一、项目目录结构

src ---
   assets ---静态资源文件
        js
        css
        images ---按模块新建文件夹进行图片分类   
   components ---全局公共组件
   http ---请求文件
       api.js ---接口存放
       http.js ---请求方法封装
       url ---测试/在线地址
   jsonData ---本地 json 数据
   router ---路由文件
   store ---vuex数据文件
   utils ---公共方法/组件注册处
      common.js ---模块方法(少量用到的,没必要绑定到实例上,增加项目的负担)
      index.js ---全局方法/组件/指令注册处
   views ---页面模块(按文件分类模块)

二、命名方式
类/id名:以模块类型 或 结构方式命名,多意义以 “-” 连接
示例
1、模块方式 menu / banner / home-banner
2、结构方式 main / wrap / box / left-box / top-wrap

方法名
体现具体意思遵守 “驼峰命名法” 方式,可翻译成单词进行驼峰连接
示例:getHomeList() / setTableFomat() / selectType()
对应:获取首页列表 / 设置表格格式 / 类型切换
Tips:方法头部添加注释,便于他人理解及快速定位

变量名
同上使用 “驼峰命名法”
1、常量全大写,多意义用下划线连接;
2、多个类名避免多行声明,采用 ES6 声明方式:
示例:

let [ str , obj , num] = [ '字符串' , {} , 0 ]

三、模块、子组件划分
模块中包含多个组块,划分成子组件引入使用,以便于后续维护避免代码臃肿。

四、css使用 sass
一个css代码块被使用多次,提取出来,采用继承方式使用,便于维护。

Author:LiangShun
Version:1.0

你可能感兴趣的:(前端开发规范)