vue-DataCenter
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
项目结构
.
├── App.vue //这个不描述了你也懂
├── api
│ ├── api.js //对axios做二次封装，并自动添加Token
│ ├── apiInterface.js //其他页面接口整合
│ └── apiManage.js //通用接口（登陆／登出，权限，导航，渠道，地域信息）
├── assets
│ ├── image //图片（本来也没多少）
│ │ ├── bg.png
│ │ ├── logo.png
│ │ ├── text.png
│ │ └── title_logo.png
│ └── less
│ ├── common
│ │ └── common.less //页面公用的样式
│ ├── main.less //入口less（在这里引入所有的页面less和公用less）
│ ├── mixin.less //整合公用的less函数
│ └── page
│ ├── home.less //整体框架布局的样式
│ ├── layout.less //公用页面的布局样式
│ ├── login.less //登陆页面的布局样式
│ └── navtransform.less //图标和表格切换样式
├── components //可复用的组件整合
│ ├── Datacenter //数据概要用到的组件
│ │ ├── dataBox.vue //中频出现的盒子组件
│ │ ├── dataLayout.vue //数据概要整体页面组件
│ │ └── dataTable.vue //高频出现的表格组件
│ ├── Generalization
│ │ └── index.vue //扇形和柱形图组合的页面
│ ├── Leveltab
│ │ └── index.vue //有三级目录的页面需要水平导航的组件
│ ├── Multipletables
│ │ └── index.vue //这个问武超（PS:不是我写的，逃）
│ ├── Screenfull
│ │ └── index.vue //全屏按钮组件
│ └── Userview //这个应该改名（FilterButtonGroup）,按钮筛选组件
│ ├── FilterAreaChannel.vue //地域渠道时间筛选
│ ├── FilterAreaDevice.vue //地域设备时间筛选
│ ├── FilterAreaPlatform.vue //地域平台时间筛选
│ ├── FilterChannelPlatform.vue //渠道平台时间筛选
│ ├── FilterDeviceGroup.vue //只针对设备筛选（用的地方较少）
│ ├── FilterItem.vue //最小化的筛选组件（可以根据需要组合新的）
│ ├── FilterTimeGroup.vue //只筛选时间的组件
│ └── ShowMsgBOX.vue //筛选组下方的显示区域（由于页面不同，可用性太低）
├── filters
│ └── index.js //过滤数据和组合新的数据结构的全局函数
├── main.js //入口js（后面详细分析）
├── mixins
│ └── index.js //Vue混入组件（抽离公用的函数和变量，以后可能会用到）
├── mock
│ ├── getPersonalMsg.js //开发初期用于模拟接口
│ ├── getUserList.js
│ └── loginBySelf.js
├── router
│ └── index.js //路由配置文件（后面详细分析）
├── store //Vuex配置
│ ├── getters.js //可复用的数据和兄弟组件通信的数据
│ ├── index.js //配置文件
│ └── modules
│ ├── auth.js //权限模块和公用数据都写在这里
│ ├── form.js //现在用户和编辑用户的表单提交
│ └── user.js //管理用户信息
└── views //所有页面级别的组件
├── Login.vue //登陆组件
├── above
│ └── index.vue //默认路劲跳转的个人详情展示页
├── intelligent //智能产品（一级）目录
│ ├── components
│ │ └── dataLayout.vue //这个没必要放在这，因为全局组件里面有了
│ ├── dataSummary
│ │ └── index.vue //就是数据概要组件（只需要更换接口就行了）
│ ├── device
│ │ └── Device.vue //设备页面
│ ├── inquire
│ │ └── dataInquire.vue //数据查询页面
│ ├── terminal
│ │ └── Area.vue //终端下的地域页面
│ └── user
│ ├── active.vue //活跃页面
│ ├── index.vue //要跳转三级目录必须引入这个
│ └── newActivetion.vue //新增激活页面
├── layout
│ ├── Appmain.vue //路由变化的核心页面
│ ├── Header.vue //头部组件
│ ├── Home.vue //整体页面布局组件
│ ├── Sidebar.vue //侧边导航组件
│ └── SidebarItem.vue //最小级的导航，递归生产侧边导航
├── manage
│ ├── AuthManage.vue //权限管理页面
│ ├── UserManage.vue //用户管理页面
│ ├── addGroup.vue //新增权限页面（不会出现的侧边导航）
│ ├── components
│ │ ├── addUserFormItem.vue //新增用户填写的表单
│ │ └── editUserFormItem.vue //编辑用户填写的表单
│ └── editGroup.vue //编辑权限的页面
├── tangshi //糖士（一级）目录
│ ├── AppProfile
│ │ └── index.vue //APP概况页面
│ ├── channel
│ │ └── index.vue //渠道页面
│ ├── components
│ │ └── dataLayout.vue //重复的组件（删掉吧）
│ ├── dataSummary
│ │ └── index.vue //数据概要页面
│ ├── share //分享（二级）目录
│ │ ├── AppShare.vue //APP分享页面
│ │ ├── contentShare.vue //内容分享页面
│ │ └── index.vue
│ ├── terminal //终端（二级）目录
│ │ ├── index.vue
│ │ ├── internet.vue //网络页面
│ │ ├── phone.vue //手机页面
│ │ └── region.vue //地域页面
│ └── user //用户（二级）目录
│ ├── index.vue
│ ├── newUser.vue //新增用户页面
│ ├── stayActive.vue //留存活跃页面
│ ├── userRetained.vue //用户留存页面
│ └── versionDistribution.vue //版本分布页面
├── tianjiyun //天际云（一级）目录，详细描述参考糖士
│ ├── AppProfile
│ │ └── index.vue
│ ├── channel
│ │ └── index.vue
│ ├── dataSummary
│ │ └── index.vue
│ ├── share
│ │ ├── AppShare.vue
│ │ ├── contentShare.vue
│ │ └── index.vue
│ ├── terminal
│ │ ├── index.vue
│ │ ├── internet.vue
│ │ ├── phone.vue
│ │ └── region.vue
│ └── user
│ ├── index.vue
│ ├── newUser.vue
│ ├── stayActive.vue
│ └── versionDistribution.vue
└── transaction //教育统计（一级）目录
├── healthservice.vue //健康服务页面
└── taobao.vue //淘宝页面
项目核心技术栈
该项目主要基于vue2.3 + Vuex + vue-router + element-UI + ES6，
数据交互：用的是axios(可根据后台需求配置标准的RESTful请求函数，可对请求头，响应头配置)
图表绘制：用的是v-charts（基于eharts的二次封装，建议按需引入，如果有特殊需求可去github提issue.）
cookie: 用的是js-cookie（不多说，最强的cookie库）
核心的逻辑分析
- store
auth.js: 万年不变的数据，以及大部分只需请求一次的数据都放在这个js下，返回一个Promise实例，这些数据大部分如不需要分顺序加载，所以可以在'/views/layout/Home.vue'通过this.$store.dispatch来触发，把这些请求放进Promise.all([promiseA,promoseB,...])加快请求速度.
user.js: 登陆，登出，获取用户信息的操作都放在里执行，让组件代码更精解，把逻辑抽离，同时每个用户独有的信息也存在这个js中.
form.js: 因为用户添加和编辑请求的参数不同，而且通信不方便，所以放在vuex处理，通关两个变量formVisible和editFormVisible控制表单显示／隐藏，private_admin_id用来区别用户的唯一标示，这个字段在组件跳转的时候已经携带在hash中.
router
开发中不必采用按需加载，但是上线打包时，记住切换成按需加载，可极大提高第一次打开页面的速度（！！！重点！！！），后续如何要添加面包屑也是在router里面配置。另外有些组件里配置了pid是用来区别是否生成水平导航的，后续如果结构又变，按需更改.manage
此文件下是针对超级管理员才能进入的页面，表单验证前端这边已全部处理，删除管理员和权限时也有做提示，复杂的地方主要在勾选权限部分定义的两个函数handleCheckAllChange和handleCheckedItemChange.总的来说这块是核心的部分，如果没有特殊情况，不建议改动（后续接入APP授权也放在这个文件下）.Userview(有时间最好将文件名改成FilterButtonGroup)
也是整个项目最核心的地方，因为数据传递层级较多，又涉及到下拉框和按钮同时控制某一个关键字段。主要是FilterItem.vue接受一个publicvalue(公共值)和value(私有值，即下拉框的值)，组件会触发两个函数onClick和onChange给父组件，特别要注意前者特殊情况下会触发后者（PS：onChange执行的条件是下拉框value改变，onClick会清空value，所以要判断一下）.
第二点，组合成的筛选组，需要跑出一个json对象，这个对象是用于showMsgBox请求用的，但他们属于兄弟组件，无法直接通信，需要在它两外层包裹一个父组件，用来监听这个request,这样可以直接在methods里面直接调用request(parmas)函数，记住params已经是一个json对象了，可直接用来与后台交互.