vue引入Vue-Awesome

Vue-Awesome建立在Font Awesome上 v4.5.0，取决于Vue.js v2.0.1 +，所以安装了Vue-Awesome就可以直接使用Font Awesome的字体图标。

1.安装Vue-Awesome

　　$ npm install vue-awesome

2.引入Vue-Awesome

　　在main.js文件中加入以下代码：

　　　　import ‘vue-awesome/icons‘
　　　　import Icon from ‘vue-awesome/components/Icon‘

　　　　Vue.component(‘icon‘, Icon)

3.使用

　　<icon :name="refresh" scale="2"></icon> //scale:图标大小1，2，3。。。

　　<icon :name="refresh" spin></icon> //spin:图标旋转

　　<icon :name="refresh" flip="horizontal"></icon> //flip:翻转

时间： 2024-12-29 04:40:20

vue引入Vue-Awesome的相关文章

vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <template> </template> <script> </script> <style> </style> 要引入其他vue ,需要 import <template> <div> <Header></

vue 引入通用 css

1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.css' /*引入公共样式*/ 2.在 index.html 中引入,这个不说了: 3.在 app.

记webpack下引入vue的方法（非.vue文件方式）

直接script引入下载静态的vue.js文件则最后用copy-webpack-plugin复制到一样的目录即可使用npm安装的vue无法直接用 import vue from "vue",因为这样引用的是vue.common.js查资料:为什么会引 vue.common.js,from 'vue' 不该引的是 vue.js 么?这就要引入另一个知识点:package.json.package.json 中的 main 属性决定了,当项目被引入时,输出的是哪个文件,而 vue 的 p

vue引入element-ui不生效

为了同样的错误不再犯第三次,我决定用文字记录, 在写vue项目时最初需要用到 dev-tools 所以根据要求需要引入vue.js 我使用的是bootstrap的cdn 然后后来需要使用element-ui,引入方式和官网的一样,启动项目也不报错,但是重要的是,鸡毛都没有,压根儿就没有渲染元素, 于是很难受,尝试各种决绝方案,最后皇天不负有心人,解决了.于是乎很开心的写下这篇日志, element和cdn冲突去掉引入的cdn即可原文地址:https://www.cnblogs.com/zha

VUE引入模块之import xxx from 'xxx' 和 import {xxx} from 'xxx'的区别

import FunName from ‘../xxx’ export defualt function FunName() { return fetch({ url: '/article/list', method: 'get' }); } import {xxx} from ‘../xxx’ export function FunName() { return fetch({ url: '/article/list', method: 'get' }); } ES中的模块导出导入 expor

vue 引入 leaflet1.4.0

安装leaflet npm install leaflet --save // 在main.js 中设置如下 //引入样式文件 import 'leaflet/dist/leaflet.css' <template> <div id="map"> </div> </template> <script> import * as L from 'leaflet' //Vue.L = Vue.prototype.$L = L var

vue引入elementUI(第三方样式库)

前置: 在已经安装好vue的前提下 ,没有安装vue参考: vue搭建教程 elementUI官网组件使用文档: elementUI使用文档 1.终端直接运行安装命令 npm i element-ui -S 2. 打开vue项目在man.js引入elementui 3.直接在vue的文件使用elementUI的样式即可例如布局的片段代码,使用过程中直接复制elementUI官网的代码进行修改即可原文地址:https://www.cnblogs.com/Jack-cx/p/11371206.h

js 引入Vue.js实现vue效果

拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, u

vue 引入Element-ui和axios

vue create project_name npm install sass-loader node-sass sass fibers npm install element-ui npm install axios 完整引入在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vu

引入vue.js 文件

引入vue.js 文件:https://blog.csdn.net/weixin_41796631/article/details/82790970 一.引入vue.js 文件 1. 用脚本标签<script> 引入外部vue.js 文件<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2. 下面在一个新的 <script><script>