组件拆分

+static
   +css
      reset.css

reset.css做一些reset重置，
选用http://cssreset.com官网提供的reset样式

在index.html中引用：

<link rel="stylesheet" type="text/css" href="static/css/reset.css"/>

加上使用手机端代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

app.vue作为总的layout

• 引入头部组件
  import header from './components/header/header'

• 注册组件
  export default { components: { "v-header": header } }
• 使用组件
  <v-header></v-header>
  注意：header作为html5标签不能直接当做组件

header.vue:

<template>
 <div class="header">我是header</div>
</template>
<script>
export default {

}
</script>
<style>
   
</style>

下面写导航栏，用flex布局

使用stylus:

• 安装使用
  cnpm install stylus-loader --save
cnpm install stylus --save

<style lang="stylus" scoped>

<style>  

• 设计稿：
  高80px的话要除以2

222.png

• node_modules下的postcss会自动帮我们搞定css兼容问题