（5）用vue写去哪网——iconfont的使用、路径别名、css变量

1. iconfont的使用

在iconfont官网选好自己项目中使用的svg图标，将这些图标添加到指定项目中，然后点击下载到本地，解压后，可用的文件是：iconfont.css和iconfont.eot、svg、ttf、woff这四种字体，将iconfont.css文件和其他的第三方css文件放在一起，将四种字体文件放在一个名为iconfont的文件夹中，这样做就是归个类而已。

需要注意的是：四个字体被iconfont.css文件引入，而iconfont.css被main.js入口文件引入，这样组件都可以使用iconfont.css了。

 四个字体被iconfont.css文件引入是url路径：

 iconfont.css被main.js入口文件引入：

 在组件中的使用：任意标签 + class=iconfont + 转义字符

<span class="iconfont">&#xe61e;</span>

注意：要确保iconfont.css文件完整，不要随意删除里面的代码。 

还有其他的使用方式：待完善

2. 路径别名

在build文件夹下，有webpack.base.conf.js文件中，resolve对象，可以设置路径别名，在全局中生效

3. css变量

在组件样式style标签中引入定义变量的文件，注意在style中引入文件时，import前加@，路径前加~

@import '~styles/varible.styl'

变量的定义：$变量名 = css属性值

$bg = #00bcd4

4. 补充知识点：

（1）display：flex，flex-grow的使用

（2）git知识：

创建一个分支：git checkout -b 分支名，

将本地仓库的代码提交到分支：git push origin 分支名

（3）vue超链接：router-link标签取代a标签，to属性取代ref属性

（4）yarn命令：yarn run dev 开启开发模式的服务器；yarn add 插件名  添加插件