在普通的項(xiàng)目中,我們可以通過(guò)
<script src="index.js"></script>
來(lái)引入外部的js文件汰扭,但是在Vue項(xiàng)目中稠肘,就不可以使用這種方式了,需要使用ES6語(yǔ)法來(lái)引入萝毛,同時(shí)還要對(duì)已有的js文件做相應(yīng)的修改项阴。
一般情況下,我們引入外部js文件笆包,是要調(diào)用js文件中的函數(shù)环揽。在Vue項(xiàng)目中略荡,我們首先要使用export
命令將這個(gè)函數(shù)拋出,然后才能在其他的Vue組件中使用import
命令引入歉胶。同時(shí)還要注意外部js腳本的存放位置汛兜,不能放在components文件夾下。
一通今、修改外部js腳本
比如有一個(gè)實(shí)現(xiàn)MD5加密算法的js腳本文件粥谬,代碼如下:
var MD5 = function (string) {
// 這里是MD5的具體實(shí)現(xiàn)算法
}
如果我們?cè)谄渌腣ue組件中想要引入MD5函數(shù),那么要在MD5加密算法的js腳本的最后辫塌,使用如下代碼漏策,將MD5函數(shù)導(dǎo)出:
export {
MD5
}
最后還是要提示一下,這個(gè)外部腳本不要放在components文件夾下璃氢,否則會(huì)一直報(bào)錯(cuò)哟玷。可以在src文件夾下新建一個(gè)js文件夾一也,然后將外部js腳本放在這個(gè)文件夾下巢寡,然后就可以在其他Vue組件中引入該js腳本。
二椰苟、在Vue組件中引入js組件
在組件中使用import { 函數(shù)名 } from 外部腳本名
來(lái)從外部js腳本中導(dǎo)入我們需要使用的函數(shù)抑月。比如我們要從md5.js腳本中導(dǎo)入MD5函數(shù),使用以下代碼:
import { MD5 } from '../js/md5'
這樣舆蝴,我們就可以在這個(gè)Vue組件中正常調(diào)用MD5函數(shù)了谦絮,代碼如下:
created: function () {
console.log(MD5("66666"));
}