前端框架及实施流程

1、制定前端框架（前端框架会议-分工）

负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率；

带领团队完成研发工具及平台前端部分的设计、研发和维护；

带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先 ；

负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

构建工具（webpack、grunt、gulp）

前端框架（vue、angular、react）

后端框架（koa、express）

2、根据设计规范制定样式规范

//常用 css

.nowrap{

  white-space: nowrap;

  word-break:keep-all;           /* 不换行 */

  overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */

  text-overflow:ellipsis;        /*...代替*/

}

.pointer{cursor: pointer}

.fr{float:right}

.text-center {text-align: center}

//Global css

*{

padding:

0;margin: 0

}

html{height:

100%}

body{position:absolute;height:

100%;width:100%;font-family:@font-family-base}

a{cursor: pointer;text-decoration: none}a,a:hover,a:focus{text-decoration: none}

ul{list-style:

none}

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{

  -webkit-box-shadow: 0 0 0 1000px white inset;

}

input[type=text]:focus,

input[type=password]:focus, textarea:focus {

  -webkit-box-shadow: 0 0 0 1000px white inset;

}

textarea{resize:none}

button{

  outline: none;

}

变量

Main color

Main grey

Main border radius

Main width

Font-family

…

//Mixin

.border-radius(@radius){

    -webkit-border-radius: @radius;

    -moz-border-radius: @radius;

    -mz-border-radius: @radius;

    border-radius: @radius;

}

.transition(@transition){

    -webkit-transition: @transition;

    -moz-transition: @transition;

    -ms-transition: @transition;

    transition: @transition;

}

.transform(@transform){

    -webkit-transform: @transform;

    -moz-transform: @transform;

    -ms-transform: @transform;

    transform: @transform;

}

.transform-origin(@origin){

    -webkit-transform-origin: @origin;

    -moz-transform-origin: @origin;

    -ms-transform-origin: @origin;

    transform-origin: @origin;

}

.box-shadow(@shadow){

    -webkit-box-shadow: @shadow;

    -moz-box-shadow: @shadow;

    -ms-box-shadow: @shadow;

    box-shadow: @shadow;

}

.animation(@animation){

    -webkit-animation: @animation;

    -moz-animation: @animation;

    -ms-animation: @animation;

    animation: @animation;

}

.calc(@width,@sub, @diff) {

    width : calc(~"@{width} @{sub}@{diff}");

}