vue-cli 如何使用vue-awesome?

Posted shengnan_2017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli 如何使用vue-awesome?相关的知识,希望对你有一定的参考价值。

font-awesome 有很多图标字体可供使用,那么,如何在vue中使用呢?

进入重点。。。

1.安装vue-awesome

npm insatll vue-awesome 

2.在main.js 注册

项目入口 main.js 引用字体库
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

// 引入vue-awesome
import Icon from ‘vue-awesome/components/Icon‘
import ‘vue-awesome/icons/index.js‘

// 全局注册
Vue.component(‘icon‘, Icon)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

 

3.在组件中使用 图表字体
<template>
  <div id="nav">
    <div class="left">
      <img src="../assets/logo.png" >
      <ul>
        <li>
          <icon name="home"></icon>
          home</li>
        <li>details</li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li>hello</li>
        <li>worldl</li>
      </ul>
    </div>
    {{msg}}
  </div>
</template>

<script>
export default {
  name: ‘navbar‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
  1. import Icon.vue 组件
  2. new you-icon.js,里面通过 Icon.register 注册图标
  3. 【可选】 新建图标文件出口文件,这个在使用的图标很多的时候比较方便
  4. <icon name="you icon name"></icon> 引用图标
  5. 给图标设置样式(大小可以通过 transform: scale() 来设置)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于vue-cli 如何使用vue-awesome?的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中使用阿里iconfont图标

在vuejs 中使用Font Awesome字体图标

vue-cli 使用小技巧

基于vue-cli优化的webpack配置

如何使用 '--fix' 通过 Vue-cli 进行修改

vue项目中使用iconMoon图标