Nuxt.js打造旅游网站第2篇_首页开发

页面效果：

 

1.初始化默认布局

nuxtjs提供了一个公共布局组件layouts/default.vue，该布局组件默认作用于所有页面，所以我们可以在这里加上一些公共样式，在下一小结中还会导入公共组件。

替换layouts/default.vue代码如下：

<template>
  <div>
    <!-- 内容占位组件 -->
    <nuxt />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*{
  margin:0; 
  padding:0;
}
ul, li, ol{
  list-style:none;
}
a{
  text-decoration:none;
  color:inherit;
}
a:hover{

}
em,i{
  font-style: normal;
}
</style>

layouts/default.vue