在用脚手架初始化一个项目以后，我们还需要根据我们的项目来进行一些样式相关的基本处理。
项目地址：https://github.com/Ewall1106/mall
浏览器默认样式
大家都知道各个浏览器的默认样式都有一定的差异性，而我们需要抹掉这部分的差异。
在以前的版本中仅使用
reset.css来解决这个问题-->reset.css 的引入，这里我们项目中使用一下normalize.css：
$ npm install normalize.css --save
// main.js引入一下即可
import Vue from 'vue'
// A modern alternative to CSS resets
// https://github.com/necolas/normalize.css
+ import 'normalize.css/normalize.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
刷新页面后发现该有间距的地方还是有间距，该有的默认样式还是有，这时候不要质疑我是否成功引入了，当你查看normalize.css源码以后你会发现它与
reset.css的区别是什么--->normalize.css 与 reset.css 有哪些区别？normaliz.css只是在浏览器的样式差异上打了几个补丁来抹平这些差异，所以我们还是需要添加了一份reset.css样式来对其进行补充。也就是说，对于浏览器默认样式的这部分处理，我们先用
normalize.css来抹平各浏览器的差异，然后使用一份reset.css定制化的对其进行相应的处理。
css 预编译
- 本项目使用
sass语法。你也可以自己引入使用 less-->less 的引用及公共变量的抽离
# 安装sass
$ npm install node-sass sass-loader --save-dev
-
安装 sass 可能你会遇到点问题，老是安装不上？按下列步骤排查一下：
- 有可能是网络问题，使用淘宝镜像处理一下；
- mac 用户
sudo一下试试； -
node-sass还是安装不上，切换淘宝镜像源啊什么的都不行，那么试下这行命令。-->相关 issue
$ sudo npm i --unsafe-perm node-sass -D
- 安装成功就可以了，
@vue/cli3.x之后不需要在去 webpack 配置文件里面去设置什么了。
1px 边框问题
-
产生的原因：
- 因为一个东西--
DPR(DevicePixelRatio)称设备像素比，是一个手机物理像素 /CSS像素的比值。 - 但是自从 retina 屏以来，不同的手机有不同的像素密度，css 中的
1px并不等于移动设备中的1px， 最直接的表现就是1px边框问题；简单说就是你给 border 的 css 写个1px，到手机上却变粗了显示成2px。
- 因为一个东西--
很多文章的解决办法都是用
postcss-write-svg这个插件来处理这个问题，其实不太好用额，网上搜了下，觉得这篇文章讲的比较 ok，其中比较推荐使用伪元素来解决这个问题：-->移动端 1px 解决方案。
/* 设置上边框 */
.setOnePx {
position: relative;
&::after {
position: absolute;
content: "";
background-color: #e5e5e5;
display: block;
width: 100%;
height: 1px;
transform: scale(1, 0.5);
top: 0;
left: 0;
}
}
- 本项目中默认使用
vant组件库，所以可以使用 vant 团队提供的1px 边框解决方案。
<!-- 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。-->
<!-- 上边框 -->
<div class="van-hairline--top"></div>
<!-- 下边框 -->
<div class="van-hairline--bottom"></div>
<!-- 左边框 -->
<div class="van-hairline--left"></div>
<!-- 右边框 -->
<div class="van-hairline--right"></div>
<!-- 上下边框 -->
<div class="van-hairline--top-bottom"></div>
<!-- 全边框 -->
<div class="van-hairline--surround"></div>
