项目结构及规范

vue

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

目录结构

├── build                                                         // 构建相关
├── config                                                        // 配置相关
├── src                                                           // 源代码
│   ├── api                                                       // 接口
│   ├── assets                                                    // 静态资源
│   ├── components                                                // 组件
│   ├── cnfig                                                     // axios的配置
│   ├── js                                                        // 公用js
│   ├── router                                                    // 路由
│   ├── store                                                     // vuex
│   │   ├─ modules                                                // 状态库模块
│   │   ├─ actions                                                // 公用异步操作
│   │   ├─ getters                                                // 获取公用states
│   │   ├─ index                                                  // 总和vuex输出
│   │   ├─ mutations                                              // 公用同步修改
│   │   ├─ states                                                 // 公用状态
│   ├── styles                                                    // 公用样式
│   ├── router                                                    // 路由views
│   ├── views                                                     // 页面
│   └── App.vue                                                   // 入口文件
├── package.json                                                  // package.json
└── README.md                                                     // 文档

components下的目录结构

├── assembly                                          // 公用组件
│  ├── card                                           // 卡片
│  ├── popup                                          // 弹窗
│  └── queryForm                                      // 查询条件组件
├── js                                                // 输出组件
│  ├──publicAssembl.js                                // 输出公用组件
│  └──wsAssembly.js                                   // 输出弹窗组件
└── views                                             // 视图层组件结构和views层相同

views下的目录结构

---

注：router下modules和views相同，添加页面请实时更新文档

├── content                                                // 右侧页面部分
│   ├── customer                                           // 客户
│   │   ├── customerManagement                             // 客户管理
│   │   │   │   ├── customerManagement                     // 客户管理
│   │   │   └   └    └── modules                           // 客户管理下的页面
│   ├── shop                                               // 店铺
│   │   ├── order                                          // 订单管理
│   │   │   └── modules                                    // 订单管理下的页面
│   │   ├── storeManagement                                // 店铺管理
│   │   └   └── modules                                    // 店铺管理下的页面
│   ├── weChat                                             // 微信
│   │    ├── weChatManagement                              // 微信管理
│   └    └  └── modules                                    // 微信管理下的页面
├── index                                                  // 首页
├── login                                                  // 登陆
├── home                                                   // 二级入口文件

---

---

vue内的结构,生命周期内不可写逻辑，只可调用methods内的方法

beforeCreate除外

export default {

  name: 'index',

  props: {},

  components: {},

  created () {}, // 生命周期按照官方给的顺序写 不可颠倒 全部写到data之前

  data () {},

  methods: {},

  computed: {},

  watch: {}

}

规范

• views的结构目录是根据左侧菜单层级而来，创建文件及目录要以菜单结构为标准
• router/modules 是和views/content相同的
• components/views 和views同样相同
• common.js 内的每一个方法要写注释如，methods内的方法也要写注释

/**
   * 数组深度拷贝
   * @arr { Array }
   * */
  copyArray (arr) {
    if (!arr || !arr.length) {
      return []
    }
    return arr.map((e) => {
      if (typeof e === 'object') {
        return Object.assign({}, e)
      } else {
        return e
      }
    })
  }

• 声明变量 用let 和 常量用const 不可以使用val
• 所有的class名、id名称 以小写名称 用中划线分开
• 重复或超过两次使用的方法或组件，请封装。
• 弹窗统一放到components/popup/modues内
• 请求接口统一放到api文件夹内,文件以一级菜单为命名
• vuex common.js axios已挂载到原型链上可以直接调用.如:

this.$common.aaa()
this.$axios.get()
this.$store

组件

查询用的表单

query.png

laber：表单前文字
form-width: 文字后输入框或下拉框宽度, 默认177px

卡片

image.png

background: 背景颜色；默认:rgba(255,255,255,1)
borderRadius：圆角; 默认：8px 8px 0px 0px

      卡片
  

对话框组件

dialog.jpg

*注：对话框组件仅为最外层弹框，对话框内的表单也是组件的形式嵌入，根据展示的表单不同，只需修改对应的form-data、form-name 、title属性即可

参数	必传	说明	类型/可传	默认值
visible	是	控制对话框的显示与隐藏	boolean	false
getData	否	对话框内表单回传的数据callback回调		无
close-callback	否	需要外层关闭弹框，返回数据，对话框内部不关闭	funtion	无
form-data	否	传入到对话框中需展示的表单数据		无
form-name	是	对话框内需要展示的表单组件名称	string	无
title	是	对话框title显示文字	string	无
width	否	对话框宽度	string	575px

table组件

QQ图片20190328152430.png

*注：table组件调用时需要传入表格内容数据，表头数据，操作按钮数据,判断表格第一列复选框的显示隐藏数据

参数	必传	说明	类型/可传	默认值
tableData	是	表格所有内容数据	Array	[ ]
theadData	是	表头数据	Array	[ ]
operateData	是	对应弹框及按钮显示数据	Array	[ ]
operate	是	operateData参数，显示对应的按钮	number
title	是	operateData参数，显示弹框的title	string
operateName	是	operateData参数，显示对应的弹框子组件名字	string
isShow	是	判断表格是否需要复选框		Boolean	false

operate对应值 0：查看， 1： 聊天记录， 2：删除， 3： 下载， 4：编辑 （可在table组件中添加配置）

对话框表单组件

form.jpg

export default {
  // 批量分配好友
  name: 'batchAllocation',
  props: ['formData'],
  data () {
    return {
  // 需验证的规则
      rules: {
        user: [{required: true, message: '请选择或搜索要分配的客服', trigger: 'change'}]
      }
    }
  },
  methods: {
 // 表单数据向外抛出的方法，可在对话框组件内接收 
    commit (form) {
      let isForm = false
      this.$refs.form.validate((valid) => {
        if (valid) {
          isForm = this.formData
        } else {
          isForm = false
        }
      })
      return isForm
    }
  }
}

参数	必传	说明	类型/可传	默认值
formData	否	对话框传入的数据值，主要以键值对的形式传入，方便表单内部渲染	Object	无
commit	是	向外抛出的数据	funtion	无

*注：这里只列举ws-batch-allocation的表单组件，开发其他对话框表单组件请对应下表关系

1.批量分配好友 ws-batch-allocation

图片1.png

2. 客户分组 ws-customer-grouping

图片2.png

3. 批量打标签 ws-batch-labeling

图片3.png

4. 微信CRM列表中查看微信好友聊天记录 ws-crm-chats

图片4.png

5. 删除 ws-delete

图片5.png

6. 下载聊天记录 ws-download-chats

图片6.png

7. 店铺好友列表单个数据加好友 ws-add-shopbuddies

图片7.png

8. 微信群分配聊天群 ws-distribution-chatgroup

图片8.png

9. 微信批量分组 ws- subgroup

图片9.png

10. 选中一个记录分配聊天群 ws-selected-record-allocation

图片10.png

11. 选中一个记录群聊分组 ws-choose-chatgroup

图片11.png

12. 查看群成员 ws-view-group-members

图片12.png

13. 聊天记录里查看群或好友的聊天记录 ws-view-chats

图片13.png

14. 新增字段 ws-new-field

图片14.png

15. 自定义编辑字段 ws-edit-field

图片15.png

16. 客户分组里新增微信分组 ws-new-chatgroup

图片16.png

17. 微信列表里查看设备信息 ws-view-device-information

图片17.png

18. 设置微信分组 ws-setting-chatgroup

图片18.png

19. 微信列表查看微信号的聊天记录 ws-view-icrosignals-chatrecord

图片19.png

20. 查看朋友圈 ws-view-circle-of-friends

图片20.png

21. 设置打招呼 ws-setting-notify

图片21.png

22. 修改微信备注 ws-revise-remarks

图片22.png

23. 新增分配规则 ws--new-allocation-rules

图片23.png

24. 设置分配上限 ws-setting-distribution-toplimit

图片24.png

25. 导入快捷语 ws-Introduce-shortcuts

图片25.png

26. 清理僵尸粉 ws-clean-mbie-fan

图片26.png

27. 查看僵尸粉详情 ws-view-mbie-fan

图片27.png

28. 店铺授权第三方账号 ws-authorization-platform

图片28.png

29. 编辑店铺名称 ws-edit-shop-name

图片29.png

30. 获取新订单 ws-get-new-orders

图片30.png

31. 同步订单数据 ws-synchronize-order-data

图片31.png

32. 考勤查看时间轴 ws-attendance-timeline

图片32.png

33. 设置敏感操作 ws-setting-sensitive-operation

图片33.png

34. 敏感操作处理 ws-sensitive-operation-deal

图片34.png

35. 查看敏感操作详情 ws-view-sensitive-operation

图片35.png

36. 新增敏感词 ws-new-sensitive-words

图片36.png

37. 编辑敏感词 ws-edit-sensitive-words

图片37.png

38. 新增设备 ws-new-equipment

图片38.png

39. 批量安装app ws-batch-installation

图片39.png

40. 设置手机分组 ws-setting-phone-grouping

图片40.png

41. 手机设备分配用户 ws-mobile-device-allocation

图片41.png

42. 手机风控权限 ws-wind-control-authority

图片42.png

43. 手机可用app设置 ws-available-app-setting

图片43.png

44. 联系人导入 ws-contact-import

    
    
    图片44.png

45. 同步历史消息 ws-synchronizing-historical-messages

图片45.png

46. 新增手机分组 ws-new-mobile-grouping

图片46.png

47. 新增APP设置 ws-new-app-setting

图片47.png

48. 分配设备 ws-distribution-equipment

图片48.png

49. 新增反馈 ws-feedback

图片49.png

50. 新增部门 ws-new-department

图片50.png

51. 编辑部门 ws-edit-department

图片51.png

52. 新增账户 ws-edit-account

图片52.png

53. 设置账户权限 ws-setting-account-power

图片53.png

54. 账户秘钥 ws-account-secret-key

图片54.png

55. 重置密码 ws-reset-password

图片55.png

56. 敏感通知 ws-sensitive-notification

图片56.png

分页组件

page.jpg

参数	必传	说明	类型/可传	默认值
current-page	是	当前页数	number	无
page-sizes	否	每页显示个数选择器的选项设置	number[]	[10, 20, 30, 40, 50]
page-size	否	每页显示条目个数	number	10
total	否	总条目数	number	100
handleCurrentChange	是	切换页码抛出的事件	function	无

按钮组件

button.jpg

参数	必传	说明	类型/可传	默认值
name	否	判断按钮为重置或查询	string / 可选值为 reset、search	search

注: 如有疑问请反馈,查看地址https://www.jianshu.com/p/50aa0952f97d

---

最后修改时间:2019-3-28