normalize.css是一款优秀的前端css初始化工具！之前没尝试过在VueCli中使用。记录一下..

运行环境 Runtime environment

1
2
3
4
操作系统 ： Windows10
IDE: JetBrains WebStorm 2018.2.1 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
VueCli : 3

背景

Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。

相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

总之，Normalize.css是一种CSS reset的替代方案。

优势

  • 保护有用的浏览器样式而不是去掉他们；

  • 为大部分HTML元素提供一般化的样式；

  • 修复浏览器自身的bug并保证各浏览器的一致性；

  • 优化css可用性；

  • 用注释和详细的文档来解释代码；

  • Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化；
    尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

    使用方法

  • 安装

npm install –save normalize.css

  • VueCli 下的 main.js 导入

import ‘normalize.css/normalize.css’

若是出现引入报错，可能没有安装css-loader 和style-loader

npm install css-loader style-loader

如果出现 core-js/modules/es.object.to-string 之类的报错

npm install core-js

或者降版本

npm i core-js@2.6.5 –save