05-2 Vue项目初始化.md

浏览器打开 http://localhost:8080 ，即可看到搭建好的初始界面

image

这个界面上部图片是app.vue里面的图片

20190131100040.png

下面不分是通过router-view路由出口渲染出来的hello world组件，为了去除浏览器自带样式，以及去掉一些多余的图片等内容，我们需要对项目进行初始化

• 新建styles文件夹
  引入reset.css文件，清除浏览器默认样式

// reset.css
@charset "utf-8";html{background-color:#fff;color:#000;font-size:16px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none;color: #444}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}

新建index.css全局修改样式,并在main.js中引入

import './styles/reset.css'
import './styles/index.css'

• 2、删除app.vue中的img
• 3. 修改app.vue的css样式

//  在线图标在这里引入
html,body,#app{
  height: 100%;
  min-width:999px;
  background: #F2F6FC;
}
#app {
  font-size: 14px;
  font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 999px;
}

code.png