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 的写法
先写那些会改变元素渲染样式，比如宽，高，定位，浮动等，而后写字体和颜色相关的。
