这篇文章主要介绍了vue.js引入外部CSS样式和外部JS文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?

一.引入外部CSS样式文件

1. 在app.vue中<style>下直接引入对应的路径

使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped。

<style scoped>
 @import "../static/font/iconfont.css";
</style>

注:如果有样式时,应该放在#app上面引入,不然引入不成功!

[email protected]改成<style src=""></style>引入外部样式

二. 引入外部JS文件

1. 一个动画需要的JS库(Velocity.js)

var Velocity = function (string) {

  // 这里是Velocity的具体实现算法

}

2.因为我们想在Vue组件中想要引入Velocity函数,那么要在Velocity加密算法的js脚本的最后,使用如下代码,将Velocity函数导出:

export {
 Velocity
}

注:外部脚本js不要放在components文件夹下,否则会一直报错。可以在src文件夹下新建一个js文件夹,然后将外部js脚本放在这个文件夹下,然后就可以在其他Vue组件中引入该js脚本。

3.在组件中使用 import { 函数名 } from 外部脚本名 来从外部js脚本中导入我们需要使用的函数。

import { Velocity } from '../config/velocity.js'

4. 在Vue组件中正常调用Velocity函数

enter: function (el, done) {
   Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
   Velocity(el, { fontSize: '1em' }, { complete: done })
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

    无相关信息
最新资讯
软银、摩根大通近期或将分别提交WeWork救助方案

软银、摩根大通近期或

知情人士透露,软银和摩根大通将在未来几天分别向WeWork
Apple Pay或存在反竞争行为 欧盟反垄断机构将调查

Apple Pay或存在反竞

据外媒报道,苹果公司推出的非接触式支付服务Apple Pay
微软给CEO纳德拉加薪66%:赞其具备“战略领导力”

微软给CEO纳德拉加薪6

因为微软实现了业务目标,股价也得以推升,该公司CEO萨蒂
趣头条宣布旗下米读小说完成1亿美元B轮融资

趣头条宣布旗下米读小

趣头条方面表示,本轮融资将用于内容建设、作者生态构建
法庭批准阿里巴巴2.5亿美元“集体诉讼和解方案”

法庭批准阿里巴巴2.5

曼哈顿一名联邦法官日前批准了阿里巴巴的2.5亿美元和
IBM第三季度营收180亿美元 净利同比下降38%

IBM第三季度营收180亿

IBM第三季度营收为180.28亿美元,比去年同期的187.56亿
最新文章
微信小程序调用天气接口并且渲染在页面过程详解

微信小程序调用天气接

这篇文章主要介绍了微信小程序调用天气接口并且渲染在
Electron + vue 打包桌面操作流程详解

Electron + vue 打包

这篇文章主要介绍了Electron + vue 打包桌面操作流程,
前端Vue项目详解--初始化及导航栏

前端Vue项目详解--初

这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,
ES6 Object方法扩展的应用实例分析

ES6 Object方法扩展的

这篇文章主要介绍了ES6 Object方法扩展的应用,结合实
JS实现给数组对象排序的方法分析

JS实现给数组对象排序

这篇文章主要介绍了JS实现给数组对象排序的方法,结合
基于vue+axios+lrz.js微信端图片压缩上传方法

基于vue+axios+lrz.js

这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压