| 导语 由于WeGame接入的游戏数量与日俱增，部门内的开发与运营同学无法负责全部游戏的接入内容配置，因此需要搭建一个能够由开发商自己进行游戏接入、配置、发布、结算的一站式平台，逐渐将接入工作转交给开发商。
目录
一、前言
二、探索——踩坑，见招拆招
三、总结
一、前言
自今年初3月份开始接手开发者平台的重构工作，如图：
开发者平台是基于WeGame UI组件库来搭建的一个后台管理系统，设计师只需要提供各个UI组件的样式，然后重构和开发把对应的组件写好样式、加上功能即可。
今年由于WeGame业务的发展，需要做大量的后台管理系统，开发者平台是其中之一。这些后台管理系统的结构、功能都大同小异，比较适合用UI组件库的方式来搭建页面。
不过，使用UI组件库搭建页面有利也有弊。
优点：
可以快速的批量化生产页面；
* 设计师做完组件库的样式后，就不需要过多的参与，可以抽出人力去支持更重要的项目；
* 项目流程简化：产品提完需求，无需再经过美术设计，开发直接上手，有问题时重构再帮忙拼页面，提升了工作效率。
缺点：
页面的美观度不高； *
开发写出来的页面结构会比较复杂； *
需求没走美术设计这一环节，所以产品反复修改样式细节问题； *
页面的布局和样式缺乏灵活性，受组件限制。 组件化开发有利有弊，其实都源于工作中踩过的那些坑~
二、探索——踩坑，见招拆招
我们传统的一个工作流程是： 产品 → 交互·视觉 → 重构 → 前端开发 → 后台开发
由于后台系统使用了组件，视觉参与完组件库的搭建后，就可以全身而退了。开发直接用组件拼页面，拼完以后，重构在开发拼好的页面上进行修改联调样式。
工作流程就变成了： 产品 → 前端开发 → 重构 → 后台开发
改成这种模式以后，页面可以快速的批量生产（后台管理系统大多是表单、表格，用组件复制即可）。
遇到的问题：
1、找不到目录
刚开始参与后台管理系统项目的时候，开发直接丢个截图过来，说这里样式不美观，需要重构帮忙调一下。
但是当我打开文件夹，看到目录时瞬间傻眼了——开发后的页面都是vue后缀，而且拆分成不同的模块，放在不同的地方，完全不知道该去哪个文件里修改样式……
香菇蓝瘦
后来向开发请教，才知道标红框的是重构的静态文件，标黄的目录是开发的vue页面，如下图：
文件目录
好！页面目录找到了，那对应的vue文件是哪个呢？
Vue文件目录 此处省略N个页面文件名...，傻眼了吧？
开发又教了我一招：一种是在常用的浏览器里安装vue.js的插件，以Chrome为例：
安装VUE插件后，点击页面对应的地方，就可以在调试面板里显示vue文件路径，这样就可以轻轻松松找到svn里面的vue页面，然后进行联调。
2、vue文件看不懂
相信每一个第一次接触vue格式的文件的重构同学，都跟我一样，刚开始是傻眼的，完全看不懂……
!
( Vue文件
以上图为例，给大家讲解一下：
每一个页面都是由<template></template>标签包裹起来，没有这个标签包裹就会报错无法生效！
Vue文件里的标签都是el-开头。 el-dlalog标签就是指最外层的dialog标签，el-form就是一个form标签，el-row是创建基础的栅格布局，el-button标签就是一个button按钮。
3、与前端后台之间的工作配合*
沟通协调非常重要，刚接手这个项目的时候，对负责这个项目的开发同学也都不认识。
在联调的过程中，经常会碰到页面里某个数据缺失的情况，然后我需要去推动解决这个bug。但是作为新人，不是非常懂流程，所以就先去找了A产品大哥，A产品大哥说问下B开发小哥，B开发小哥说这个是某C开发小哥做的，要他帮忙弄一下。好，我找到C开发小哥，他不在，RTX处于离开状态。。。
!
本来可以半个小时解决好的事情，最后硬生生拖了一个上午。然后问了组内的同事，才知道需要自己先定位问题，然后弄清楚这里是谁开发的，直接找对应的开发，请他解决这个问题。
开发不在位置上时，就先给他留言，等他回来后，再去当面跟他说明这个bug，协助他解决这个问题。 通过这个问题，让我知道腾讯企业文化里合作的重要性：
* 向组内同事的请教，可以让我对工作流程有更多的了解，避免盲目的沟通而浪费时间，也更加知道在bug面前，我的角色该是什么；
* 明明不是自己的问题，但也主动的去研究问题的根源，然后协助对应的开发解决这个问题。 这些是我在以前的公司里没有经历过的，也越来越喜欢腾讯的企业文化^^ **
4、组件样式的重置——组件化
页面也不都是一成不变的，有时候产品会提些组件以外的个性化需求，这个时候，需要评估下在别的后台系统里是否会出现，然后决定是否要补充到组件里去。 如果是很多后台系统都会出现的，那就跟产品和开发商量，把它补充到组件库里；
如果只是单独这个后台系统会出现，那就写在这个后台系统的独立样式里。 组件的命名要易懂、规范。比如我命名了一个is-disabled的class名，她的功能是隐藏元素。那么当某个元件需要被隐藏的时候，只要追加这个class，就能产生置灰的效果。
三、总结
经过开发者平台1.4到1.8五个迭代的重构，工作中有以下几点心得：
* 做好以后的美观度不够，对于美观度对要求比较高，个性化需求较多的项目不推荐使用 * 对项目目录要清晰熟知，这样才可提高工作效率；
* 样式书写要组件化，命名规范，后面的同学能快速参与进来；
* 沟通协调很重要，你不仅仅是一个人在工作，更是团队一起在奋进；
* 多学习，了解上下游同学所用的知识与技术，工作更高效，完成度好。
体验地址： 翼计划 https://wings.wegame.com/wings/index.html
