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的文件，而后在使用的地方导入便可
复制代码