Vue学习笔记 -项目搭建1.2 iconfont和全局CSS样式，路径替代符

1、挑选合适的图标

在https://www.iconfont.cn挑选择适合自身项目的图标，然后将挑选好的图标下载下来以供使用

2、图标处理

想要使用下载下来的图标，将这几个字体单独放在iconfont目录中（目录名字自己取 我是取iconfont）然后将iconfont.css和iconfont目录放到项目中的专门放置样式的地方

3、项目中引用

然后在main.js中导入iconfont.css 这样每个子组件都能用

import Vue from 'vue'
import App from './App'
import router from './router'
import fastClick from 'fastclick'
import '../../../assets/style/reset.css'
import '../../../assets/style/border.css'
import '../../../assets/style/iconfont.css'
 
Vue.config.productionTip = false
fastClick.attach(document.body)
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4、项目中引用

然后在header.vue中添加相应的类和字体代码即可
back-icon 和arrow-icon是自定义类 用来调整字体图标的大小位置等样式

<template>
  <div class="Header">
    <div class="Header-left">
      <div class="iconfont back-icon">&#xeb99;</div>
    </div>
    <div class="Header-input">
      <span class="iconfont">&#xe615;</span>
      输入城市/景点/主题
    </div>
    <div class="Header-right">
      城市
      <span class="iconfont arrow-icon">&#xe64a;</span>
    </div>
  </div>
</template>

5、代码 优化方面

①CSS样式抽取
在项目放置css样式文件的地方创建varibles.styl（名字随便取 后缀不能错）然后写入：

$bgColor = #00bcd4

然后在需要用到该样式的地方，导入该文件。然后使用该变量：

<style lang="stylus" scoped>
@import '../../../assets/style/varibles.styl'
  .Header
    background: $bgColor

②路径抽取
将经常用到的路径使用替代符号，省的每次都数一堆…/…/…/assets/style
在项目名/build/webpack.base.conf.js中添加：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/style'),
    }
  },

这样以后都可以用styles来替代…/…/…/assets/style了
这里有一个地方要注意， 在子组件中想用这种路径替代符的话 需要在前面加上’~'符号，而main.js中就不用加

main.js:
 
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'
 
Header.vue:
<style lang="stylus" scoped>
@import '~styles/varibles.styl'