Web前端页面规范化和交互规范

1.  组件划分：组件分为公共组件、页面组件

1.1   公共组件

   公共组件一般是页面公用的头部和底部。还有一些模块公用的部分。 这些要单独抽取出来放在components 里面。

1.2    页面组件

页面组件是一些复用性相对少的组件。一般只有一个模块使用。一般这种会在pages页面新建一个文件夹，然后这个模块的主页面改名成index，其他模块放在这个文件夹里面。抽取的组件，共用部分也是。而页面组件又由很多个功能构成，一般如果ui全部到位的情况下，会先对所有设计稿进行划分，抽取出来公用组件，划分好目录结构，页面组件主要是通过路由来体现的，一个路由路径为一个页。不要把所有的功能都单独划分路由。比如我有一个登陆页面有两个不同的状态，这个页面上下的部分都是一样的，只有中间的状态不一样，这些属于功能，最好使用显示隐藏来切换这些状态，抽取组件的时候，弹层可以作为一个单独的组件，引入到需要的页面里。不单独成页的功能不需要做路由路径。

1.3   组件划分要有度，要明白组件的本质是什么，增强页面的复用性，所以不要把所有模块都进行组件化，太过细碎化的组件拼接的页面会造成页面之间传值的时候过于复杂。

2 页面结构的划分及文件放的位置

2.1 静态文件是放在static里面的，这个文件的主要特点就是不经过webpack的编译。一般我们把不需要压缩的文件放在这里。

2.2 Assets这个文件里也可以放一些图片或者静态的css之类。我一般会把比较大的图片放在这里。

2.3 页面的图片有两部分构成。一个是动态占位图，一种是起修饰作用的小图标。动态占位图一般来说是要放在一个文件里的。这样便于后期数据动态之后进行删除。

2.4 一个页面如何区别到底该用背景图还是图片。主要是看这个图片在属不属于页面的一部分，是构成页面的部分。去掉了就会影响页面的完整性，这种一般用图片。而另一种就是起修饰作用的小图标及图片。小图标一般用字体图标实现，也就是伪元素实现。而大的用于修饰样式的背景图片通常是写给容器背景的。

3 引入公共部分

3.1 引入公共的css 和js的时候，nuxt是在nuxt.config.js 里进行配置的，可以做到全局加载。

3.2 插件

有的第三方插件是自带模块化的，可以用npm安装。在nuxt.config.js 中引入之后，还要在页面模块化引入。

还有一种就是要靠操作dom和初始化的插件，没有模块化的，要下载下来引入。

4 package.json

 这个是npm的包管理器，一般我们要使用的模块安装时，都要加上—save 或者–save-dev 分别是生产环境的包和开发环境的。 上线打包的时候，会有差别。

5. untils 是用于管理在开发过程中封装的公共方法之类。比如ajax请求，格式化日期等。

6. apis

用于存放全部的页面接口请求文件，˙以页面为单位进行拆分，最后在引入到一个js里面。便于接口的管理和查找。

7. 交互的实现

常规交互： 如淘宝tab栏， 多选，和展开的效果，大部分的效果是常见的京东和淘宝的交互逻辑。如果有的不确定要进行沟通，不要自己一所当然的实现，这样容易造成返工。浪费时间。

8. 页面布局的实现

8.1 拿到一个页面的时候，要考虑页面本身应该具有的样式及功能。 例如一部分内容是居中的，就要确保页面在 任何屏幕及分辨率都是居中的。

 8.2页面盒子分为固定大小和不固定大小的容器。

固定大小的容器一般是要做一些数据过多的情况下的处理的。比如超出部分不显示。

不是固定大小的容器，要求不写高，盒子大小要通过数据和样式撑起来，数据量大和少的时候，不会太影响页面的布局和显示。

9 在写页面样式结构的时候，要想到数据交互的时候，如何实现，不能为了写页面而写页面。

10 css 命名规范

css 命名分为 OOCSS 、SMACSS、BEM

OOCSS 面向对象css，原则 1.分离结构和外观 2 分离容器和内容。

SMACSS  将样式划分为5个部分

1. 基础 不添加css 的时候页面的表现形式，也就是单纯的布局结构。

 2.布局

 把页面分为一些区域，就是拿到一个页面的时候，页面的模块。

3. 状态

 描述在特定的状态或情况下，模块或布局的显示方式。最常见的就是高亮状态。

4. 模块

设计中的模块化，可复用单元。也就是页面拆分出来的组件，样式写在对应的地方，在其他页面调用的时候可以不需要修改直接使用。

5. 主题

一个可选的视觉外关，可以让你换不同的主题

BEM

主要分为 块名，元素，修饰符

[if !supportLists]1.   [endif]块名

所属组件的名称

[if !supportLists]2.   [endif]元素

元素在块里面的名称

[if !supportLists]3.   [endif]修饰符

任何与块或元素相关联的修饰符。

11. vue的数据驱动

 尽量不要通过操作dom，进行页面的重新渲染。 要通过改变数据来进行页面的状态改变。

12 css 的写法

先写那些会改变元素渲染样式，比如宽，高，定位，浮动等，而后写字体和颜色相关的。