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/>'
})
<template>
<div id="nav">
<div class="left">
<img src="../assets/logo.png" alt="">
<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>
import Icon.vue
组件- new
you-icon.js
,里面通过Icon.register
注册图标 - 【可选】 新建图标文件出口文件,这个在使用的图标很多的时候比较方便
<icon name="you icon name"></icon>
引用图标- 给图标设置样式(大小可以通过
transform: scale()
来设置)
vue-cli 如何使用vue-awesome?的更多相关文章
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
- Vue CLI UI:Vue开发者必不可少的工具
突然发现一个Vue cli 比较好用的工具,一个可视化图形界面方便你去创建.更新和管理Vue项目.这里分享2个作者写得比较好的文章 https://codeseeding.com/portal.php ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...
- @vue/cli 3配置文件vue.config.js
const webpack = require('webpack') const path = require('path') // const CompressionWebpackPlugin = ...
随机推荐
- ubuntu linux重置密码
(和网上的有点不一样,记录一下) 1)重启系统,同时长时间按住shift键进入grub菜单:GNU GRUB version 1.99-12ubuntu5(如图一) 2)选择Ubuntu, with ...
- hihttps教你在Wireshark中提取旁路https解密源码
大家好,我是hihttps,专注SSL web安全研究,今天本文就是教大家怎样从wireshark源码中,提取旁路https解密的源码,非常值得学习和商业应用. 一.旁路https解密条件 众所周知, ...
- Spring MVC-从零开始-分拆applicationContext. xrnl
1.目录结构 2.web.xml配置 <?xml version="1.0" encoding="ISO-8859-1"?> <web-app ...
- layui-table 对表格数据进行处理之后的排序问题
使用layui table过程中,将某一列的数据格式进行转换,或者将0/1状态改为是/否,或者将数字改为星星评分显示的时候都会遇到一个问题,我的表格数据转换成其他形式,同时设置了sort:true,此 ...
- kotlin系列文章 --- 1.初识kotlin
简介 Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由Jetbrains设计开发,现在是Android官方开发语言,和Java具有互操作性,可以共存. 为什么选择kotlin? 简 ...
- Android 横竖屏切换生命周期
默认情况下,屏幕会旋转并且会重新走生命周期. 1. 屏幕不旋转 在AndroidManifest文件中的对应Activity中配置android:screenOrientation=”landsc ...
- Docker service update更新不成功的问题
一.基本信息 1.Docker版本 [root@ip---- ~]# docker --version Docker version , build a872fc2f86 2.系统版本 [root ...
- springmvc处理局部异常和全局异常
springmvc通过HandlerExceptionResolver(是一个接口,在spring-webmvc依赖下)处理程序异常,包括处理器异常.数据绑定异常以及处理器执行时发生的异常.Handl ...
- Executor线程池原理详解
线程池 线程池的目的就是减少多线程创建的开销,减少资源的消耗,让系统更加的稳定.在web开发中,服务器会为了一个请求分配一个线程来处理,如果每次请求都创建一个线程,请求结束就销毁这个线程.那么在高并发 ...
- ubuntu使用uwsgi+nginx部署django
ls -lha export WORKON_HOME=~/venv source /usr/local/bin/vitualenvwrapper.sh VIRTUALENVWRAPPER_PYTHON ...