初始化home

为了让home页分成好几个组件，可以在home文件夹新建componets文件夹，里新建Header.vue,在home中引入Header.vue

Home.vue文件的内容

<template>
     <div>
      <home-header></home-header>
     </div>
</template>


<script>
import HomeHeader from './components/Header'
export default{
name:'Home',
compontents:{
HomeHeader
}
}
</script>


<style>

</style>

header的内容

<template>
     <div>
      <div>this is header</div>
     </div>
</template>


<script>
export default{
name:'HomeHeader'
}
</script>


<style>

</style>

在header里export default name ,然后在home.vue里引入header文件，定义组件，在dom里也要定义

在header里定义样式时，加上scoped 可以让里面的clsss 不对其他组件有影响。尺寸把设计图除以2，再转换为rem，1rem=font-size 设计图除以100，得rem

引入字体库

在src /assets/styles/里新建一个iconfont文件夹 把字体文件放到里面，把iconfont.css放在styles文件夹里，然后改一下。css文件夹里的字体引入路径 添加./iconfont/

删除最下面的代码

在main.js里引入iconfont.css文件

在Header.vue里引入字体符

定义一些全局样式

在assets/styles/文件下创建varibles.styl文件，定义一个变量$bgColor =#00bcd4，然后在Header.vue里引入@import ../../../assets/styles/varible.styl然后把颜色替换成变量

~@，相当于src目录，

因为一些目录是常用的，所以可以自定义一个符来代表。打开webpack.base.conf.js 找到resolve 下的alias 添加

‘styles’:resolve('src/assets/styles'),  把main。js里的文件路径改成styles 报错是因为要 npm run start