vue.js引入外部CSS樣式和外部JS文件的方法
學(xué)習(xí)Vue.js動(dòng)畫(huà)時(shí)，需要引入一個(gè)animate.css，如何全局引入外部文件呢？
一.引入外部CSS樣式文件
1. 在app.vue中<style>下直接引入對(duì)應(yīng)的路徑
使用@import引入外部css，作用域是全局的，也可在相應(yīng)的單vue組件引入，import并不是引入代碼到<style></style>里面，而是發(fā)起新的請(qǐng)求獲得樣式資源，并且沒(méi)有加scoped。
<style scoped> @import "../static/font/iconfont.css"; </style>
注：如果有樣式時(shí)，應(yīng)該放在#app上面引入，不然引入不成功！
2.@import改成<style src=""></style>引入外部樣式
二. 引入外部JS文件
1. 一個(gè)動(dòng)畫(huà)需要的JS庫(kù)（Velocity.js）
var Velocity = function (string) {
// 這里是Velocity的具體實(shí)現(xiàn)算法
}
2.因?yàn)槲覀兿朐赩ue組件中想要引入Velocity函數(shù)，那么要在Velocity加密算法的js腳本的最后，使用如下代碼，將Velocity函數(shù)導(dǎo)出：
export {
Velocity
}
注：外部腳本js不要放在components文件夾下，否則會(huì)一直報(bào)錯(cuò)?？梢栽趕rc文件夾下新建一個(gè)js文件夾，然后將外部js腳本放在這個(gè)文件夾下，然后就可以在其他Vue組件中引入該js腳本。
3.在組件中使用 import { 函數(shù)名 } from 外部腳本名 來(lái)從外部js腳本中導(dǎo)入我們需要使用的函數(shù)。
import { Velocity } from '../config/velocity.js'
4. 在Vue組件中正常調(diào)用Velocity函數(shù)
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)docx、pdf格式文件在線預(yù)覽功能
在業(yè)務(wù)中，如果遇到文檔管理類的功能，會(huì)出現(xiàn)需要在線預(yù)覽的業(yè)務(wù)需求，本文主要是通過(guò)第三方庫(kù)來(lái)實(shí)現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件,感興趣的可以了解一下2022-09-09
Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例
這篇文章主要介紹了Vue項(xiàng)目使用Websocket大文件FileReader()切片上傳實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
對(duì)vue中v-on綁定自定事件的實(shí)例講解
今天小編就為大家分享一篇對(duì)vue中v-on綁定自定事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于vue-cli3和element實(shí)現(xiàn)登陸頁(yè)面
這篇文章主要介紹了vue-cli3和element做一個(gè)簡(jiǎn)單的登陸頁(yè)面本文實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼
本文主要介紹了vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開(kāi)收起的處理的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開(kāi)收起的處理的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)移動(dòng)端懸浮窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端懸浮窗效果，vuejs實(shí)現(xiàn)div拖拽移動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue $mount實(shí)戰(zhàn)之實(shí)現(xiàn)消息彈窗組件
這篇文章主要介紹了Vue $mount實(shí)現(xiàn)消息彈窗組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
在Vue中實(shí)現(xiàn)圖表數(shù)據(jù)的動(dòng)態(tài)展示的示例代碼
隨著數(shù)據(jù)可視化技術(shù)的發(fā)展,圖表在前端開(kāi)發(fā)中扮演著越來(lái)越重要的角色,Vue.js 作為一個(gè)流行的前端框架,以其靈活性和易用性,成為了實(shí)現(xiàn)圖表動(dòng)態(tài)展示的理想選擇,在這篇博客中,我們將學(xué)習(xí)如何在 Vue 3 中實(shí)現(xiàn)動(dòng)態(tài)展示圖表數(shù)據(jù),需要的朋友可以參考下2024-11-11