初始化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