vue 组件不受全局样式影响_为什么我写在app.vue的样式不全局，就是对其他的组件没有影响...

app.vue

export default {

name: 'app'

}

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,

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, 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;

}

a {

color: inherit;

text-decoration: none;

}

body {

background: #f0f2f5;

font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;

font-size: 14px;

color: #444;

}

.app-head {

background: #363636;

color: #b2b2b2;

height: 90px;

line-height: 90px;

width: 100%;

}

.app-head-inner {

width: 1200px;

margin: 0 auto;

}

.head-logo {

float: left;

margin-top: 20px;

}

.head-logo img {

width: 50px;

}

.head-nav {

float: right;

}

.head-nav ul {

overflow: hidden;

}

.head-nav li {

cursor: pointer;

float: left;

}

.nav-pile {

padding: 0 10px;

}

.app-foot {

text-align: center;

height: 80px;

width: 100%;

line-height: 80px;

background: #e3e4e8;

clear: both;

margin-top: 30px;

}

.container {

width: 1200px;

margin: 0 auto;

}

.hr {

height: 1px;

width: 100%;

background: #ddd;

}

.button {

background: #4fc08d;

color: #fff;

display: inline-block;

padding: 10px 20px;

cursor: pointer;

}

.button:hover {

background: #4fc08d;

}

.g-form {

}

.g-form-line {

padding: 15px 0;

}

.g-form-label {

width: 100px;

font-size: 16px;

display: inline-block;

}

.g-form-input {

display: inline-block;

}

.g-form-input input {

height: 30px;

width: 200px;

line-height: 30px;

vertical-align: middle;

padding: 0 10px;

border: 1px solid #ccc;

}

.g-form-btn {

padding-left: 100px;

}

index.vue

export default {

data () {

return {

boardList: [

{

title: '开放产品',

description: '开放产品是一款开放产品',

id: 'car',

toKey: 'analysis',

saleout: false

},

{

title: '品牌营销',

description: '品牌营销帮助你的产品更好地找到定位',

id: 'earth',

toKey: 'count',

saleout: false

},

{

title: '使命必达',

description: '使命必达快速迭代永远保持最前端的速度',

id: 'loud',

toKey: 'forecast',

saleout: true

},

{

title: '勇攀高峰',

description: '帮你勇闯高峰，到达事业的顶峰',

id: 'hill',

toKey: 'publish',

saleout: false

}

],

newsList: [

{

title: '数据统计',

url: 'http://starcraft.com'

},

{

title: '数据预测',

url: 'http://warcraft.com'

},

{

title: '流量分析',

url: 'http://overwatch.com',

hot: true

},

{

title: '广告发布',

url: 'http://hearstone.com'

}

],

productList: {

pc: {

title:'PC产品',

list: [

{

name: '数据统计',

url: 'http://starcraft.com'

},

{

name: '数据预测',

url: 'http://warcraft.com'

},

{

name: '流量分析',

url: 'http://overwatch.com',

hot: true

},

{

name: '广告发布',

url: 'http://hearstone.com'

}

]

},

app: {

title:'手机应用类',

list: [

{

name: '91助手',

url: 'http://weixin.com'

},

{

name: '产品助手',

url: 'http://twitter.com',

hot: true

},

{

name: '智能地图',

url: 'http://maps.com'

},

{

name: '团队语音',

url: 'http://phone.com'

}

]

}

}

}

}

}

.index-wrap {

width: 1200px;

margin: 0 auto;

overflow: hidden;

}

.index-left {

float: left;

width: 300px;

text-align: left;

}

.index-right {

float: left;

width: 900px;

}

.index-left-block {

margin: 15px;

background: #fff;

box-shadow: 0 0 1px #ddd;

}

.index-left-block .hr {

margin-bottom: 20px;

}

.index-left-block h2 {

background: #4fc08d;

color: #fff;

padding: 10px 15px;

margin-bottom: 20px;

}

.index-left-block h3 {

padding: 0 15px 5px 15px;

font-weight: bold;

color: #222;

}

.index-left-block ul {

padding: 10px 15px;

}

.index-left-block li {

padding: 5px;

}

.index-board-list {

overflow: hidden;

}

.index-board-item {

float: left;

width: 400px;

background: #fff;

box-shadow: 0 0 1px #ddd;

padding: 20px;

margin-right: 20px;

margin-bottom: 20px;

}

.index-board-item-inner {

min-height: 125px;

padding-left: 120px;

}

.index-board-item h2 {

font-size: 18px;

font-weight: bold;

color: #000;

margin-bottom: 15px;

}

.line-last {

margin-right: 0;

}

.index-board-button {

margin-top: 20px;

}

.lastest-news {

min-height: 512px;

}

.hot-tag {

background: red;

color: #fff;

}

.new-item {

display: inline-block;

width: 230px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

这里的class=“button”不能从app.vue那里获取样式，这是为什么？