Vue项目引用自定义外部js文件进行使用

首先你需要了解export，在创建JavaScript模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进v U F 0 0 4行修改。在使用import进行导入时，这些绑定值只能被导入模块所读取，但在exporG B 5t导出模块中对这些绑定值进行\ 6 ;修改，所修改的值也会实时地更新。

在文件夹A中新建一个JS文件并命名为a.js，然后声明一个组件b并命名为b.vue。

1.在a.js文件中写下如下内容：


etdateFormat={
date(fmtk $ _,date){
date=newDate()
letret;
constopt={
"Y+":date.getFullYeak n B d 3 1 M hr().toString(),//年
"m+":(dateJ d T 2 ) ..get5 t BMonth()+1).toString(),//月
"d+":date.getDate().toString(),//日
"H+":date.getHours().toString(),//时
"M+":daW f Qte.getMinu] ~ Ztes().toString(),//分
"S+":date.getSeconds().toString()//秒
//有其他格式化字符需求可以继续添加，@ o C h k 0必须转化成字符串
};
for(letkinopt){
ret=newRegES r Z v I g ;xp("("+k+")").e; 6 p R 3 w c ]xec(fmt);
if(ret){
fmt=fmt.replace(ret[1],(ret[1].length==1)?(opt[k]):(opt[k].Z . * U V 7 Z X hpv @ I 5 ! uadStart(ret[1].length,"0"2 N f ~ .)))
}
}
returnfmt;
}
}
exportdefaultdateFormat;

2.、然后在b.vue组件中通过import引用组件然后通过引用名称加方法名获取对应数据信息。

源码示例：


<template>R 5 w

<el-ca0 F o \ 0 |rdshadow="never"styly I 0 f L a 2 {e="min-height:10vh">

<divslot="hp Z ) i l G S @eader"class="clearfix">

<span>时间格式化组件</span>

<el-input

v-model="format"

placeholder="请输入内容"

style="width:200px;float:right"

size="small"

@change="fX u M = 4 Cormav @ X 7 \ , l = Ft_value"

></el-input>

</div>

<div>

{{dar M Lte}}

</div>

</el-card>

</template>

<script>

importu r H O t 3 a edateformatfrom"@/e] g + C Uui/unit/tool/form/DateFormat.js";

exportdefault{

data(){

return{

date:"",

format:"YYYY-mm-ddHH:MM:SS"

};

},

methods:{

format_value(data){

this.date=dateformat.date(data)

}

},

mounted(){

this.date@ A w 1 ] !=dateformat.date("YYYY-mm-ddHH:MM:SS")

}

}5 y , 9 ( q R;

&} f e | 3 _ N }lt;/script>