由于html的默认样式,例如body的边距,h1-h6的标签的字体大小等等,和我们希望的初始样式有不小的差距,所以我们基本每个项目都需要做项目重置,以下是重置样式的css文件
body,html {
font-size:14px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-family: Roboto, Roboto-Medium;
margin: 0;
padding: 0;
height: 100%;
background: #fff;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin: 0;
padding: 0;
outline: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 14px;
font-weight: normal;
}
table {
font-size: inherit;
}
input, select {
font-size: 100%;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
}
button {
text-align: center;
border: none;
cursor: pointer;
background: transparent;
}
i {
font-style: inherit;
}
th, em, strong, b, address, cite {
font-style: normal;
font-weight: normal;
}
li {
list-style: none;
}
img, fieldset {
width: 100%;
height: 100%;
display: block;
border: 0 none;
}
ins {
text-decoration: none;
}
a {
color: #1b3155
}
然后再main.js中引入就好了
import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/reset.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')