vue尚硅谷外賣(3)-準備工做 圖標/stylus

圖標字體

介紹

圖標字體是以html代碼的形式在網頁中畫小圖標，使用圖標字體的優點：

1. 能夠大大減小圖標維護工做量
2. 能夠輕鬆地改變圖標的顏色、大小或其餘css效果
3. 圖標是矢量的，與像素無關，縮放圖標不會影響清晰度
4. 兼容性好

使用方式

1. 依賴網站，國內最經常使用的是阿里巴巴矢量庫
   (1)註冊帳戶，我使用了github帳戶登錄
   (2)找到想要的圖標，能夠關鍵字搜索，如」購物車「，」首頁「。而後添加入庫

(3)選擇好圖標後點擊購物車，選擇添加至項目

(4)點擊生成在線代碼能夠在線使用，也能夠下載至本地。

(5)下載到本地解壓後，能夠看到有一堆文件，打開demo_index.html能夠看到使用方式

問題來了
我發現我下載到本地解壓後沒有 iconfont.svg文件，致使我按照demo_index裏面的方式使用時會出錯，一時也沒找到解決辦法，最後仍是選擇已引入在線代碼的形式使用。

// index.html
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1150089_yea3uhmttwc.css">

//要使用的地方
<span class="iconfont icon-xxx">
複製代碼

stylus

stylus是css的一個預處理器，能夠更方便的編寫css代碼。

vue中使用stylus

1. vue中使用stylus須要先安裝相應的loader:
   npm i -D stylus stylus-loader
2. 使用stylus

// 1. 將.vue中的style標識爲stylus
// xxx.vue
<template></template>
<script></script>
//標識
<style lang="stylus" type="stylesheet/stylus" scope>
//scope表明這裏的樣式只做用在此處，不會應用到其餘vue文件中
</style>

// 2. 直接建立後綴爲.stylus的文件，而後在使用的地方導入便可
複製代碼