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
<ws-query-form label="手机号：" form-width="300px">
<el-input size="mini"></el-input>
</ws-query-form>
卡片
image.png
background: 背景颜色；默认:rgba(255,255,255,1)
borderRadius：圆角; 默认：8px 8px 0px 0px
<ws-card background="rgba(255,255,255,1)" border-radius="8px 8px 0px 0px">
卡片
</ws-card>
对话框组件
dialog.jpg
<ws-dialog
:visible.sync="visible"
@getData = "getData"
:close-callback="close"
:form-data="formData"
:width="width"
form-name="ws-batch-allocation"
title="分配好友">
</ws-dialog>
<font color="red">*注：对话框组件仅为最外层弹框，对话框内的表单也是组件的形式嵌入，根据展示的表单不同，只需修改对应的form-data、form-name 、title属性即可</font>
| 参数 | 必传 | 说明 | 类型/可传 | 默认值 |
|---|---|---|---|---|
| visible | 是 | 控制对话框的显示与隐藏 | boolean | false |
| getData | 否 | 对话框内表单回传的数据callback回调 | 无 | |
| close-callback | 否 | 需要外层关闭弹框，返回数据，对话框内部不关闭 | funtion | 无 |
| form-data | 否 | 传入到对话框中需展示的表单数据 | 无 | |
| form-name | 是 | 对话框内需要展示的表单组件名称 | string | 无 |
| title | 是 | 对话框title显示文字 | string | 无 |
| width | 否 | 对话框宽度 | string | 575px |
table组件
QQ图片20190328152430.png
<ws-commonTable :tableData="tableData" :theadData="theadData" :operateData="operateData" :isShow="isShow" ></ws-commonTable>
*注：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 | 无 |
<font color="red">*注：这里只列举ws-batch-allocation的表单组件，开发其他对话框表单组件请对应下表关系</font>
1.批量分配好友 ws-batch-allocation
图片1.png
- 客户分组 ws-customer-grouping
图片2.png
- 批量打标签 ws-batch-labeling
图片3.png
- 微信CRM列表中查看微信好友聊天记录 ws-crm-chats
图片4.png
- 删除 ws-delete
图片5.png
- 下载聊天记录 ws-download-chats
图片6.png
- 店铺好友列表单个数据加好友 ws-add-shopbuddies
图片7.png
- 微信群分配聊天群 ws-distribution-chatgroup
图片8.png
- 微信批量分组 ws- subgroup
图片9.png
- 选中一个记录分配聊天群 ws-selected-record-allocation
图片10.png
- 选中一个记录群聊分组 ws-choose-chatgroup
图片11.png
- 查看群成员 ws-view-group-members
图片12.png
- 聊天记录里查看群或好友的聊天记录 ws-view-chats
图片13.png
- 新增字段 ws-new-field
图片14.png
- 自定义编辑字段 ws-edit-field
图片15.png
- 客户分组里新增微信分组 ws-new-chatgroup
图片16.png
- 微信列表里查看设备信息 ws-view-device-information
图片17.png
- 设置微信分组 ws-setting-chatgroup
图片18.png
- 微信列表查看微信号的聊天记录 ws-view-icrosignals-chatrecord
图片19.png
- 查看朋友圈 ws-view-circle-of-friends
图片20.png
- 设置打招呼 ws-setting-notify
图片21.png
- 修改微信备注 ws-revise-remarks
图片22.png
- 新增分配规则 ws--new-allocation-rules
图片23.png
- 设置分配上限 ws-setting-distribution-toplimit
图片24.png
- 导入快捷语 ws-Introduce-shortcuts
图片25.png
- 清理僵尸粉 ws-clean-mbie-fan
图片26.png
- 查看僵尸粉详情 ws-view-mbie-fan
图片27.png
- 店铺授权第三方账号 ws-authorization-platform
图片28.png
- 编辑店铺名称 ws-edit-shop-name
图片29.png
- 获取新订单 ws-get-new-orders
图片30.png
- 同步订单数据 ws-synchronize-order-data
图片31.png
- 考勤查看时间轴 ws-attendance-timeline
图片32.png
- 设置敏感操作 ws-setting-sensitive-operation
图片33.png
- 敏感操作处理 ws-sensitive-operation-deal
图片34.png
- 查看敏感操作详情 ws-view-sensitive-operation
图片35.png
- 新增敏感词 ws-new-sensitive-words
图片36.png
- 编辑敏感词 ws-edit-sensitive-words
图片37.png
- 新增设备 ws-new-equipment
图片38.png
- 批量安装app ws-batch-installation
图片39.png
- 设置手机分组 ws-setting-phone-grouping
图片40.png
- 手机设备分配用户 ws-mobile-device-allocation
图片41.png
- 手机风控权限 ws-wind-control-authority
图片42.png
- 手机可用app设置 ws-available-app-setting
图片43.png
-
联系人导入 ws-contact-import
图片44.png
-
同步历史消息 ws-synchronizing-historical-messages
图片45.png
- 新增手机分组 ws-new-mobile-grouping
图片46.png
- 新增APP设置 ws-new-app-setting
图片47.png
- 分配设备 ws-distribution-equipment
图片48.png
- 新增反馈 ws-feedback
图片49.png
- 新增部门 ws-new-department
图片50.png
- 编辑部门 ws-edit-department
图片51.png
- 新增账户 ws-edit-account
图片52.png
- 设置账户权限 ws-setting-account-power
图片53.png
- 账户秘钥 ws-account-secret-key
图片54.png
- 重置密码 ws-reset-password
图片55.png
- 敏感通知 ws-sensitive-notification
图片56.png
分页组件
page.jpg
<ws-pagination
:current-page.sync="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
@handleCurrentChange="handleCurrentChange"
:total="total"></ws-pagination>
| 参数 | 必传 | 说明 | 类型/可传 | 默认值 |
|---|---|---|---|---|
| current-page | 是 | 当前页数 | number | 无 |
| page-sizes | 否 | 每页显示个数选择器的选项设置 | number[] | [10, 20, 30, 40, 50] |
| page-size | 否 | 每页显示条目个数 | number | 10 |
| total | 否 | 总条目数 | number | 100 |
| handleCurrentChange | 是 | 切换页码抛出的事件 | function | 无 |
按钮组件
button.jpg
<ws-button @click="search" name="reset"></ws-button>
<ws-button @click="reset"></ws-button>
| 参数 | 必传 | 说明 | 类型/可传 | 默认值 |
|---|---|---|---|---|
| name | 否 | 判断按钮为重置或查询 | string / 可选值为 reset、search | search |
注: 如有疑问请反馈,简书查看地址https://www.jianshu.com/p/50aa0952f97d
最后修改时间:2019-3-28
网友评论