溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue.js引入外部CSS樣式和外部JS文件的方法

發(fā)布時(shí)間：2020-09-23 23:28:58 來(lái)源：腳本之家 閱讀：176 作者：honey緣木魚 欄目：web開發(fā)

學(xué)習(xí)Vue.js動(dòng)畫時(shí)，需要引入一個(gè)animate.css，如何全局引入外部文件呢？

一.引入外部CSS樣式文件

1. 在app.vue中<style>下直接引入對(duì)應(yīng)的路徑

vue.js引入外部CSS樣式和外部JS文件的方法

使用@import引入外部css，作用域是全局的，也可在相應(yīng)的單vue組件引入，import并不是引入代碼到<style></style>里面，而是發(fā)起新的請(qǐng)求獲得樣式資源，并且沒有加scoped。

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

注：如果有樣式時(shí)，應(yīng)該放在#app上面引入，不然引入不成功！

2.@import改成<style src=""></style>引入外部樣式

vue.js引入外部CSS樣式和外部JS文件的方法

二. 引入外部JS文件

1. 一個(gè)動(dòng)畫需要的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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手