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

1. 字体图标去https://www.iconfont.cn挑，然后下载下来

这几个字体单独放在iconfont目录中（目录名字自己取 我是取iconfont）

然后将iconfont.css和iconfont目录放到项目中的专门放置样式的地方

然后在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/>'
})

然后在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>

 

代码 优化方面：

1. CSS样式抽取

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

然后写入：

$bgColor = #00bcd4

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

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

2.路径抽取

将经常用到的路径使用替代符号，省的每次都数一堆../../../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'