Vue项目实战07：引入Normalize.css样式初始化

Normalize.css简介

我们在开发的时候会发现很多样式都自带了各自特有的默认样式，而这样样式通常会被遗忘，导致样式调整起来很繁琐。为了让样式统一，我们在开发的时候通常会对一些元素进行样式重置，已避免默认样式影响开发。Normalize.css就是一个这样的CSS样式文件，它的作用就是让HTML元素更好的实现跨浏览器一致性。

网址链接: http://necolas.github.io/normalize.css/

Normalize.css 特点

标准化的样式，适用于大部分HTML元素；

保留有用的浏览器默认样式，而不是全部样式“重置”；

修复了浏览器BUG并保证浏览器样式的一致性；

优化了CSS样式提高了易用性；

独立模块化开发，支持样式自定义；

支持大部分主流浏览器，如Chrome、Firefox、Opera 、Safari、Internet Explorer 等（包括移动浏览器）；

安装Normalize.css

在Vue中安装Normalize.css很简单，还是老套路 ：npm install normalize.css --save，当前版本8.0.1。

normalize.css文件

在node_modules/normalize.css目录中我们可以找到normalize.css文件，我们可以看到每个元素前面都有详细的注释文档描述。Normalize支持大部分主流浏览器，同时对HTML5元素、排版、列表、嵌入式内容、表单和表格等都进行了规范化，是一种现代的、为HTML5准备的CSS重置替代方案。

项目中引入

在main.js中我们引入normalize.css样式：import 'normalize.css/normalize.css'，这样我们就可以将normalize.css作为项目的基础CSS样式并在此基础上构建我们的项目，当然如果默认值不符合我们的样式需求时我们统一可以通过自定义样式来覆盖默认值。