打开iconfont官网
图标库》官方图标库
购物车》添加至项目》下载至本地
下载到桌面,解压
字体文件对我们都有用,iconfont.css也有用,iconfont.js意义就不大了
打开Travel项目,进入src,assets,styles,在sytles目录下创建文件iconfont,把几个字体文件(iconfont.eot,iconfont.svg,iconfont.ttg,iconfont.woff)放到文件夹里,再把iconfont.css放到styles文件夹里
打开项目src,assets里styles里iconfont里的iconfont.css文件,
这里它写了一个字体库的引入,现在字体文件并没有在当前的目录下,需要改一下路径
最后给了几个class的东西,它的命名都是汉语拼音的命名,而且我们也可以直接通过64或者16进制的码直接来使用这些图标,所以这个东西就可用可不用,就删除掉了。删除掉之后iconfont就可以被使用了。
使用iconfont需要打开main.js,各个页面都需要引入iconfont,不如把iconfont放在这里
我需要在Header里面去用这个iconfont,所以打开pages下面的home的components下面的Header.vue
写完这个内容之后,我们需要在里面写一个16进制的串
打开iconfont官网,找返回按钮,有一个复制代码
1.先调整一下返回图标
2.再调整一下搜索图标
- 再看一下城市这边,向下的箭头有点大,要变小一点
给它一个自己的class arrow-icon
间距有点大
不该有的缩进,不能有
可能是inline-block造成的两个inline-block或者两个inline元素之间有一个2px间距的问题,可以给父级一个font-size 0,再给每一个子级font-size .24rem
这样header部分的布局就做完了
做完这个布局之后,需要做一些代码上的优化
header部分的背景色是一个绿色,那么整个网站的很多地方都会用到这个颜色,那就希望把这个颜色单独放到一个变量里面,然后各处去引用就行了,以后网站主题需要变更,颜色需要切换的时候,只要去改变那个变量,全局都会跟着变,这样的话可维护性会得到非常大的提升
如何去定义变量并在stylus中使用呢
src>assets>styles下创建一个stylus文件variables.styl
在这里我们就可以定义一些变量
如何使用这个变量
样式里面引入样式,不能直接用import,要加一个@
../引入当前目录的上一层
@相当于src目录
能不能通过@来写呢,其实是可以的,但是,如果在css中引入其他的css,想用这个@,前面一定要加一个~
styles目录用的比较多,用的场景比较多,有没有办法给它起一个别名呢,就像@一样
打开build
webpack.base.conf.js