项目实战14—前端代码优化

一.前言
代码是给自己看的，也是给别人看的，是给一个团队看的。前期编码梳理好清晰的逻辑，写出可读性高的代码。能够让后期维护省不少力。界面是给用户看的，任何一个小的细节问题都会影响观感。
二.优化过程
1.谨慎使用 v-if ，避免造成逻辑混乱，一层能解决就不要两层判断嵌套在一起。要考虑封装意识
如果涉及到更多条件，选择用v-else-if，而不是写多个v-if

2.清晰明了的写出注释，代码也不要堆在一起，而是根据接口清晰分层

3.一个界面，如果想在整体和细节上观感不错，那么页面的元素一定要有所规律，最起码的，就是要对齐。这需要对界面标签元素各个属性和作用有充分了解。

<div></div> 

作用：为页面的内容提供结构和背景
特性：（1）是块级元素，不能与其他元素并列的，单独占一行
（2）可以设置宽和高，如果不设置的话，宽度默认100%

<img></img>

<span></span>

通过样式属性的修改，使得img标签和span文字对齐，比如：

height: 1.5em;
vertical-align: -0.3em;