跟我一起做一個vue的小項目（二）

這個vue項目是緊跟着之前的項目跟我一起做一個vue的小項目（一）來的。
我繼續后面的開發（寫的比較粗糙，邊學邊記錄）
下圖是header頭部的樣式

header組件內容如下

//header.vue
<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">輸入城市/游玩主題</div>
    <div class="header-right">城市</div>
  </div>
</template>
<script>
export default {
  // 1rem = html font-size=50px
  name: 'HomeHeader'
}
</script>
<style lang="stylus" scoped>
  .header
    line-height:0.86rem
    background:#00bcd4
    color:#fff
    display:flex
    .header-left
      width:0.64rem
      float:left
    .header-input
      margin-top: 0.12rem;
      line-height: 0.64rem;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      margin-bottom: 0.12rem;
      flex: 1;
      background: #fff;
      padding-left: 0.1rem;
      border-radius: 0.1rem;
      color: #ccc;
    .header-right
      width:1.24rem
      float:right
      text-align:center
</style>

接下來我們要做的是添加圖標，我們可以選擇圖標，添加到購物車

下載添加到travel中的項目圖標到本地

添加iconfont相關的文件到文件夾

修改iconfon.css的內容為

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1562396347977'); /* IE9 */
  src: url('./iconfont/iconfont.eot?t=1562396347977#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANYAAsAAAAAB2AAAAMMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCGIIFATYCJAMQCwoABCAFhG0HSxt6BsieA+7mkoxkJIXVVo+ZzBwP/439um9mUE2SRKN7I1lSPZ2QSFAqJUGphLKaN+75/6tLf6IwrArR8RSmIjq2ZPtIfrJ8sAWnItDabAUerxONQAm7DJ05P34+z+X4GpbA/EC5jLVsjG1HvQDjgAIdc5IVSAFxICCezWBfXE+gXp96cRu9wwshRRF0C8SDrkqQ0vIoihavFapHxhbxLlFtek3Pgbf88/GXK1JIqrJgo72rHgXaf0DMhcYr47AyTxk/nQPaJDLGgULcjLrOoDIyDql3fpNgCqhVK/EDYuUx1///WLhhYaiy94+XiGpBbiOYIJr5AbGoVpdjEKhd5Ejwg5hrfaKsXeBZwOihDPQdjRzd/qKcHq8hO9btmyiiOyeK1V17T8qvXi1+/XrJy5eLXrwoBE0+8oU8V9q579SJwkU7dh8/WeTLPPExXrB09/XKnUXL9x6q2pVefx6+90xrjzy4HS76XhjO+mv3n549Bm/Tz+fPP9GFfF5RnEdQC+CTfKHN6PEXSuSbVAFCmY98M5Xr7a2b8zjaPpo9AtDc//ZqZ3/NWaQv9PxboC/jXRsYAJXx+B9oSu38CFmoHYA8kZr+hu84mkjecZzd/C8lvYDvXvUe7sp4AuwTf5fi1eIvXbyyqrjSwFyKLYtFXm7RD/HsFfWhla86QbtPp9B0rc4l1OqqkdToRVarnyj0cVRpMIFqtZZRb0zf5AYdOCRKHUbNCIRWl5A0+0TWapYo9I+o0u0LqrUGQr39yJ+zwWDoaV2cSIIoeCyKdZkFaWQVaUX+fKJafok3pTlzMeGm7sdOm6Mb7yNBwk8xwAypLiEoppwFcK/YjPj9DBuceYksbJoQRqPdTsdeZJNZANKs4wiJQCiwMVGYTsYE0bS+kNZ7/3yEyuIn4TOkDu9iBGfSm8ecbBwriD5VcBXprVxiClG5CAKFURwTgPWKVoSfH4MZ4628CJlgo+0IGRrZw1p0rcp2eU3gG26AesETS6TIUaJK9ZUU1Cw9yWSWabFsiXMWbqCW39+gsHAQAA==') format('woff2'),
  url('./iconfont/iconfont.woff?t=1562396347977') format('woff'),
  url('./iconfont/iconfont.ttf?t=1562396347977') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont/iconfont.svg?t=1562396347977#iconfont') format('svg'); /* iOS 4.1- */
}

 .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .iconfanhui:before {
  content: "\e624";
}

.iconsousuo:before {
  content: "\e632";
}

.iconarrow-full-down:before {
  content: "\e600";
}
  */

在main.js中添加

import './assets/styles/iconfont.css'

iconfont圖標在頁面中的應用

//header.vue
<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      輸入城市/游玩主題</div>
    <div class="header-right">
      城市
      <span class="iconfont arrow-icon">&#xe600;</span>
    </div>
  </div>
</template>
<script>
export default {
  // 1rem = html font-size=50px
  name: 'HomeHeader'
}
</script>
<style lang="stylus" scoped>
  .header
    line-height:0.86rem
    background:#00bcd4
    color:#fff
    display:flex
    .header-left
      width:0.64rem
      float:left
      .back-icon
        text-align:center
        font-size:0.4rem
    .header-input
      margin-top: 0.12rem;
      line-height: 0.64rem;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      margin-bottom: 0.12rem;
      flex: 1;
      background: #fff;
      padding-left: 0.1rem;
      border-radius: 0.1rem;
      color: #ccc;
    .header-right
      width:1.24rem
      float:right
      text-align:center
      .arrow-icon
        margin-left:-.04rem
        font-size:.24rem
</style>

頁面效果

提取公共顏色的css

//src\assets\styles\varibles.styl
$bgColor = #00bcd4

在header組件中引用$bgColor和引入@import '../../../assets/styles/varibles.styl'
修改@import '../../../assets/styles/varibles.styl'長度，一般使用@代表找到src目錄
修改引用文件長度為@import '~@/assets/styles/varibles.styl'
修改配置文件

修改header.vue中的別名為@import '~styles/varibles.styl'
修改main.js中的文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'styles/reset.css'
import 'styles/border.css'
import fastClick from 'fastclick'
import 'styles/iconfont.css'
// 1像素邊框
Vue.config.productionTip = false
fastClick.attach(document.body)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

我們運行項目發現效果ok

本篇博客內容要點：1.如何使用iconfont 2.如何通過webpack配置對代碼進行簡化3.如何使用style定義變量並在css中使用變量
未完待續