vue------引入全局重置样式

初始项目时会有默认间隙,包括一些便签也会有自带的间隙,为了不让默认的样式影响真正的实现效果,会在项目开启之际清除.
实现步骤:
1.准备一个重置样式文件
2.在main.js或app文件引入,因为不是单个组件需要,所以直接在全局设定

重置样式代码(less)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

index（less）

这里引入了另外两个的样式，下一步直接在全局引入该文件即可，如果需要单独使用，把前两行删掉就可以。

@import './reset.less';
@import './style.css';

.fl {
  float: left;
}
.fr {
  float: right;
}

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  zoom: 1;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
html,
body,
#app {
  height: 100%;
}

字体样式（css）

@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?qgkohn');
  src:  url('../assets/fonts/icomoon.eot?qgkohn#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?qgkohn') format('truetype'),
    url('../assets/fonts/icomoon.woff?qgkohn') format('woff'),
    url('../assets/fonts/icomoon.svg?qgkohn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
  content: "\e971";
}
.icon-key:before {
  content: "\e98d";
}
.icon-paragraph-justify:before {
  content: "\ea7a";
}

引入全局

在main.js文件引入

//引入全局样式，包含字体图标样式，重置样式和全局的可复用样式
import '@/styles/index.less'

效果

扩展:一般会在styles单独文件夹引入