vueCli3.0 开发规范（初稿）

一、目录结构

├── babel.config.js                                             相关配置及规范见官网 配置参考 | Vue CLI

├── dist                                                              生成打包后文件

├── node_modules                                            安装的依赖包

├── package-lock.json                                       npm包配置文件、依赖包小版本信息

├── package.json                                              npm包配置文件、依赖包信息

├── public                                                          public中的表态资源会被复制到输出目录(dist)中

├── src

│   ├── api                                                        接口

│   ├── App.vue                                                路由组件的顶层路由

│   ├── assets                                                  放置一些静态资源，例如图片，图标，字体

│   ├── components                                        公共组件

│   ├── main.js                                                Vue 入口文件

│   ├── router                                                  vue-router 相关配置

│   ├── store                                                   vuex 相关配置

│   │       ├── actions.js                                   全局vuex actions 方法

│   │       ├── mutations.js                                全局vuex mutations方法

│   │      └── index.js                                      导出vuex所有配置

│   ├── tools                                                  自定义的工具类

│   └── views                                                所有的路由组件

└── vue.config.js                                           相关配置及规范见官网 配置参考 | Vue CLI

二、 命名规范

                css 命名规范

                       1.css class命名尽量使用英语，不要使用汉拼，并且有意义，

                        2.使用单词命名时不要缩写，除非非常有名的单词。

                        3.- 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _   例如（header-list）

                        4.不允许通过1、2、3等序号进行命名

                        5.避免class与id重名

                css 编写顺序

                       1.位置，定位，层级（position，top，bottom，left，right，z-index，display，float）

                       2.大小（width，height，padding，margin）

                       3.文字系列（font, line-height, letter-spacing, color- text-align）

                       4.背景（background，border）

                       5.其他（animation，transition）

三、javascript规范（基于ES6 结合eslint 强制编码格式）

               1.变量命名采用小驼峰命名法---即首字母小写，后每个单词首字母大写

                2.常量命名采用全字母大写命名，以便于与变量区分

                    常量  const  PI = 3.141592653   变量  let  name = ''

                3.函数命名使用小驼峰命名法，条件允许情况下请采用动词前缀方式，请保证函数命名语义化明确

                4.构造函数命名必须采用大驼峰命名法，即首字母必须大写

                5.单行注释

                    // 这是名称

                    let name = 'wsl'

                6.多行注释

                    /**

                     * 这是名称 

                     * 缩写

                     */

                     let name = 'wsl'

                7.函数注释

                           函数注释也是多行注释的一种，但要求提供函数功能说明，作者信息，参数说明(若有参数)，以及返回值(若有                          返回值)说明

                  /**

                  * @desc 用于计算两数之和

                  * @author wsl

                  * @param {Number} x 数字，用于加法计算

                  * @param {Number} y 数字，用于加法计算

                  * @return {Number} result 用于保存计算后的结果

                  */

                   function add(x, y) {

                         let result = x + y;

                         return result;

                    };

               8.推荐使用对象直接创建对象，而非构造器创建

               9.字符串拼接推荐使用ES6中``拼接

               10.判断

                   比较运算符,推荐使用 '===' 与 '!=='  

                   if 推荐不要简写，判断 非空时 “!变量”需要考虑变量不为数值0

                11.循环

                     若循环中需使用函数，请将函数定义在循环外部而非内部，这样可以避免函数的反复创建

四、常用变量限制及验证

               1.名称字数限制 （推荐1-20）

               2.手机号，电话，邮箱验证（通用验证）

               3. 上传附件

                    图片：若无特殊要求，格式限制jpg、png、jpeg、gif ，大小限制 5M以下

                    视频：若无特殊要求，格式限制mp4、MPEG4 

五、页面显示及功能交互通用

              1.文字超出容器需要进行 '...' 省略

              2.图片显示 无特殊要求时，按原图宽高比显示

              3.美化滚动条 

              4.涉及数据处理功能按钮，增加防频繁点击处理

六、使用开发环境及相关附属第三方（PC端）

           1.vuecli3.0以上                   vue 全家桶  文档：介绍 | Vue CLI

           2.element-ui                       UI   文档：Element - The world's most popular Vue UI framework

           3.axios                               请求 文档：axios中文文档|axios中文网 | axios                                 

           4.vue-quill-editor                富文本，无特殊要求时  文档：vue-quill-editor | Homepage | Surmon's projects

           5.echarts                           统计图表 文档：Apache ECharts

           6.vue-amap                       地图 （高德）无特殊要求时 文档：组件 | vue-amap

七、基于RBAC权限

          1.根据角色动态获取菜单，数据及功能按钮权限

八、服务部署配合

          1.动态部署开发，生产环境  (前后端分离)

                   生产环境：nginx

                   开发环境：vue.config.js 设置本地代理

          2. 动态部署开发，生产环境 （不分离）

                  public下index.html 以缓存方式设置配置项