在iconfont官网下载所需的图标,将尾缀.svg .ttf .woff .eot的字体文件放入styles中的iconfont文件夹中,将iconfont.css文件放入styles文件夹中
改下iconfont.css中文件加载路径
@font-face {font-family: "iconfont";
src: url('./iconfont/iconfont.eot?t=1550063508301'); /* IE9 */
src: url('./iconfont/iconfont.eot?t=1550063508301#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;) format('woff2'),
url('./iconfont/iconfont.woff?t=1550063508301') format('woff'),
url('./iconfont/iconfont.ttf?t=1550063508301') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont/iconfont.svg?t=1550063508301#iconfont') format('svg'); /* iOS 4.1- */
}
在main.js中引入iconfont.css文件
import './assets/styles/iconfont.css'
使用这些图标完成首页Header
<template>
<div class="header">
<div class="header-left">
<div class="iconfont back-icon"></div>
</div>
<div class="header-input">
<span class="iconfont"></span>
输入城市/景点/游玩主题
</div>
<div class="header-right">
城市
<span class="iconfont arrow-icon"></span>
</div>
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>
<style lang="stylus" scoped>
//1rem = html font-size = 50px
//rem以字体大小为参考值,reset.css中字体大小为50px,设计图为2倍尺寸图,即86/100
.header
display: flex
line-height: 0.86rem
background: #00bcd4
color: #fff
.header-left
width: .64rem
float: left
.back-icon
font-size: 0.4rem
text-align: center
.header-input
flex: 1
height: 0.64rem
line-height: 0.64rem
margin-top: 0.12rem
margin-left: 0.2rem
padding-left: 0.2rem
background: #fff
border-radius: 0.1rem
color: #ccc
.header-right
width: 1.24rem
float: right
text-align: center
.arrow-icon
margin-left: -0.04rem
font-size:0.24rem
</style>
Header中的背景色在其他地方也能用到,所以我们可以优化一下代码,让这个背景色可以各处去引用
在styles下创建一个varibles.styl文件,写入
$bgColor = #00bcd4
然后在Header组件的style中引入这个styl,在css中引入样式时需要在import前加@
@import'../../../assets/styles/varibles.styl'
@代表src目录,也可以使用@来引入,但在css中引入时需要在前面加~
@import'~@/assets/styles/varibles.styl'
这样,就可以在Header组件的style中使用 $bgColor这个变量了
.header
display: flex
line-height: 0.86rem
background: $bgColor
color: #fff
styles目录也被用到很多次,我们可以简化styles目录,
在build中的webpack.base.conf.js中找到并添加一行代码即可
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'),
}
},
这样就可以直接使用styles目录了
@import'~styles/varibles.styl'