• vue项目中使用vue-awesome


    公司在项目重构时,遇到图标问题,然后把vue-awesome、iconfont、iconMoon都试了一遍,虽然最终使用了iconMoon但是也要把这两个过程记录一下。

    github地址

    1.首先安装vue-awesome依赖包

    安装方法:

    使用npm安装

    npm install vue-awesome

    使用bower安装

    bower install vue-awesome

    注意:安装之后打开node_modules文件夹,查看是否有vue-awesome文件夹,如果没有看是否是编辑器太慢的原因,也可以重启一下看是否有该文件

    如果还没有表示没有安装成功,需要重新安装

    2.在main.js文件下

    在github上可以明确看到如果考虑项目大小,只导入用于减少包大小的图标

    import 'vue-awesome/icons/flag'

    否则

    import 'vue-awesome/icons'

    这里我不考虑大小使用第二种

    然后

    import Icon from 'vue-awesome/components/Icon'

    全局使用
    Vue.component('icon',Icon)

    这里是我的代码提供参考

    接下来就可以去在任何.vue组件中使用了!

    这里我在最新刚刚下载好的vue-cli项目中试用一下,看一下效果

     <icon name="beer"></icon>

    就会看到

    如果你不知道,这些图标有哪些,叫什么名字,可以去font awesome官网上查看,vue-awesome是基于font awesome图标库来的

    传送门送你离开 

  • 相关阅读:
    电脑连接树莓派Pi Zero W
    HTTP 302报文
    解决跨域访问
    转chromeUI4
    转chromeUI3
    转chromeUI2
    转chromeUI
    OPM中细节设置
    CMFCButton导致PropertySheet窗口关闭
    [转]objectarx 加载菜单-ObjectARX中右键(快捷)菜单的实现方法
  • 原文地址:https://www.cnblogs.com/chinabin1993/p/8184114.html
Copyright © 2020-2023  润新知