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

转载于:https://juejin.im/post/5cb83029f265da03914d5b3f