vue.js引入外部CSS样式和外部JS文件的方法
更新时间：2019年01月06日 11:16:05 作者：honey缘木鱼
这篇文章主要介绍了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上面引入，不然引入不成功！
2.@import改成<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 })
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件,感兴趣的可以了解一下2022-09-09
Vue项目使用Websocket大文件FileReader()切片上传实例
这篇文章主要介绍了Vue项目使用Websocket大文件FileReader()切片上传实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue-cli3和element做一个简单的登陆页面本文实例图文相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
本文主要介绍了vue+echarts5实现中国地图的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果，vuejs实现div拖拽移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
这篇文章主要介绍了vue中全局路由守卫中替代this操作(this.$store/this.$vux)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue $mount实现消息弹窗组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
随着数据可视化技术的发展,图表在前端开发中扮演着越来越重要的角色,Vue.js 作为一个流行的前端框架,以其灵活性和易用性,成为了实现图表动态展示的理想选择,在这篇博客中,我们将学习如何在 Vue 3 中实现动态展示图表数据,需要的朋友可以参考下2024-11-11
最新评论