vue项目实战总结笔记

公司项目也快接近尾声，在做项目的过程中，自己也遇到好多坑，个人觉得语法结构规范严谨对页面呈现的效果尤为重要。

• 确认项目框架
  一般页面都分为公共的头部和底部，还有中间渲染的内容。
  主要开始工作：封装公共部分的组件，确定页面模块的搭建。

• 头部导航不建议使用iview框架进行路由的跳转。
  主要工作：通过导航子集的id进行路由的切换，以及点击当前导航显示的样式，采用循环的语法。
  若是固定导航，在body内加入padding-top。

  switch(name){
              case "index":
                //这里进行显示和隐藏的内容
                //这里进行路由的跳转
                break;
              case "product":
              //这里进行显示和隐藏的内容
              //这里进行路由的跳转
                break;
              case "power":
              //这里进行显示和隐藏的内容
              //这里进行路由的跳转
                break;
          }

• 进行公共样式的引入
  首先是清除样式的引入： rest.css
  页面中要用到的公共样式： common.scss(文件名自定义)
  （采用公共样式，对修改框架之类的样式有所帮助，可以减少样式污染）；
  使用图标字体，多用于公共样式的引入。
  多使用伪类元素： before/after, 对于一些线条的处理。
  或者是清除浮动：（这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。 ）

　　#outer:after{ 

　　 content:"."; 

　　 height:0; 

　　 visibility:hidden; 

　　 display:block; 

　　 clear:both; 

　　} 

• 对于重复的样式多使用v-for进行样式的循环，简化代码
  界面总会出现一些重复样式的展示，多使用v-for循环，对后期进行接口的配置有很大的帮助。

• 使用iview框架时，特别要注意不同页面同类样式的修改。
  这算是最坑的地方了，使用对话框的时候，路由跳转就会出现样式的污染，当时想到的方法就是 scoped,使样式单页面应用私有化，结果样式全乱了。最终的解决方法就是把框架的类名，包裹在当前界面最外层的类名下，这样才规范了代码。

• 灵活运用双向数据绑定

• 使用svn进行代码的更新上传
  注意先提交之后再进行文件的更新，不然很容易丢失更改的内容，产生冲突。