前端开发规范

一、项目目录结构

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

Tags 标签

扩展阅读

加个好友，技术交流