前端规范第一版

命名规范

VUE项目名和项目目录

• vue版本使用2.6.12，

项目名应见名知意，多个单词使用连字符(-)隔开，

项目目录(以下目录如果未使用到可以不添加)：

src 源码目录
|– api 所有api接口
|– assets 静态资源，images, icons,等
|– components 公用组件
|– constants 常量信息，项目所有Enum, 全局常量等
|– directives 自定义指令
|– filters 过滤器，全局工具
|– datas 模拟数据，临时存放
|– lib 外部引用的插件存放及修改文件
|– mock 模拟接口，临时存放
|– plugins 插件，全局使用
|– router 路由，统一管理
|– store vuex, 统一管理
|– themes 自定义样式主题
|– styles 样式表，(公共样式,自定义样式)
|– utils 工具库目录
|– views 视图目录
| |– role role模块名
| |– |– role-list.vue role列表页面
| |– |– role-add.vue role新建页面
| |– |– role-update.vue role更新页面
| |– |– components role模块通用组件文件夹
| |– employee employee模块

1. 各目录说明

   其中components目录下的组件(公共组件，各模块公共组件)的组件名使用大写，剩余的（各个模块）的组件使用kebab-case 命名，且必须是多个单词（大于等于2），这是因为避免和html元素名重复，html元素名都是单个单词

2. assets为资源目录，

   里面存放images，icons等静态资源，命名格式为下划线方式（连字符）

   |assets
   |– icons
   |– images
   | |– background_color.png
   | |– upload_header.png

3. components目录

   此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase，基础组件名前加Base

   ├─BackToTop
   │ index.vue
   ├─Breadcrumb
   │ index.vue

4. constants目录（不用可以不写）

   此目录存放所有常量，比如ic空间的座位的各个状态，

   |constants

   |– index.js

   例子，employee.js

   export const EMPLOYEE_STATUS = {
   NORMAL: {

   value: 1,
   desc: '正常'

   },
   DISABLED: {

   value: 1,
   desc: '禁用'

   },
   DELETED: {

   value: 2,
   desc: '已删除'

   }
   };

   export const EMPLOYEE_ACCOUNT_TYPE = {
   QQ: {

   value: 1,
   desc: 'QQ登录'

   },
   WECHAT: {

   value: 2,
   desc: '微信登录'

   },
   DINGDING: {

   value: 3,
   desc: '钉钉登录'

   },
   USERNAME: {

   value: 4,
   desc: '用户名密码登录'

   }
   };

   export default {
   EMPLOYEE_STATUS,
   EMPLOYEE_ACCOUNT_TYPE
   };

5. router和store目录

   • router里面一定要使用按需加载组件
   • router尽量按照views中的结构保持一致
   • store按照业务进行拆分不同的js文件

6. views目录

   • 目录命名尽量，router，api接口，最好也和后端（看后台接口名和界面的吻合程度）保持一致
   • 模块内的components目录中组件使用大驼峰形式
   • 连续符的组件在单文件vue中使用时使用驼峰式，比如

   |– views 视图目录
   | |– role role模块名
   | | |– RoleList.vue role列表页面
   | | |– RoleAdd.vue role新建页面
   | | |– RoleUpdate.vue role更新页面
   | | |– components role模块通用组件文件夹
   | | | |– RoleHeader.vue role头部组件
   | | | |– RoleModal.vue role弹出框组件
   | |– Employee employee模块
   | |– BehaviorLog 行为日志log模块
   | |– CodeGenerator 代码生成器模块

7. api目录

   调用后台接口的封装层，尽量与views目录保持一致，方便查找

8. utils

   存放所有工具类

注释说明

必须添加注释的地方

• api目录的接口js文件必须添加注释
• store中的state，mutation，action必须添加注释
• vue template文件添加 start end 注释
• vue 文件的 methods，尽量每个 method 都添加注释
• vue 文件的 data, 非常见单词要加注释

组件库（一个项目强制使用一种）

1. pc端

   • elementUI(推荐)
   • ant-design-vue
   • …

2. 移动端

   • vant(推荐)
   • mintUI
   • …

工具库

1. 时间处理

   • moment.js

2. js方法增强工具库

   • lodash

3. jQuery（vue项目不推荐使用，首先是jquery库体积大，vue框架所做功能和jquery会冲突）

4. 推荐移动端，判断手机，浏览器型号

   • zeptoJS

5. 动画库

   • animateCSS

6. 移动端滑动插件

   • better-scroll2

7. 轮播，滑动库

   • swiper6
   • vue里面推荐使用插件，swiper@4.1.1"">vue-awesome-swiper@4.1.1

8. 图表库

   • echarts
   • echarts论坛

9. 3D可视化库

   • d3.js
   • three.js

富文本编辑器（待具体使用后再决定推荐哪个）

• ckeditor
• tinymce
• quill（ic空间使用的，并不推荐）

其他

• vue的template中html节点元素尽量不使用id
• 尽量不要手动操作DOM元素
• 删除无用代码，如console.log（会影响性能），无用功能的代码

css规范

• 使用sass
• 避免使用id选择器

命名规则可以优先从以下来寻找

头：header

  内容：content/container

  尾：footer

  导航：nav

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

  登录条：loginbar

  标志：logo

  广告：banner

  页面主体：main

  热点：hot

  新闻：news

  下载：download

  子导航：subnav

  菜单：menu

  子菜单：submenu

  搜索：search

  友情链接：friendlink

  页脚：footer

  版权：copyright

  滚动：scroll

  内容：content

  标签页：tab

  文章列表：list

  提示信息：msg

  小技巧：tips

  栏目标题：title

  加入：joinus

  指南：guild

  服务：service

  注册：regsiter

  状态：status

  投票：vote

  合作伙伴：partner

(二)注释的写法:

  /* Footer */

  内容区

  /* End Footer */

(三)结构和功能的命名:

  (1)页面结构

  容器: container

  页头：header

  内容：content/container

  页面主体：main

  页尾：footer

  导航：nav

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

  (2)导航

  导航：nav

  主导航：mainbav

  子导航：subnav

  顶导航：topnav

  边导航：sidebar

  左导航：leftsidebar

  右导航：rightsidebar

  菜单：menu

  子菜单：submenu

  标题: title

  摘要: summary

  (3)功能

  标志：logo

  广告：banner

  登陆：login

  登录条：loginbar

  注册：regsiter

  搜索：search

  功能区：shop

  标题：title

  加入：joinus

  状态：status

  按钮：btn

  滚动：scroll

  标签页：tab

  文章列表：list

  提示信息：msg

  当前的: current

  小技巧：tips

  图标: icon

  注释：note

  指南：guild

  服务：service

  热点：hot

  新闻：news

  下载：download

  投票：vote

  合作伙伴：partner

  友情链接：link

  版权：copyright\