Vue 中使用export 和export default 引出

在工程中，需要定义一些常量，和公用函数供工程使用时，可以创建一个公用的js文件，使用export 导出或者export default 导出。

• 使用export 导出

1.工程中要定义一些常量

2.定义一些公用的处理函数

//常量定义
const UserName = 'xxxx';//用户名
const PassWord = 'xxxx';//密码

//定义一些函数
//示例 求和
function add(a,b){
return a+b;
}
function reduce(c,d){
return c-d;
}
export {UserName, PassWord, add, reduce}

使用场景

1.引用其中的一个,包括常量或者函数

//引用常量
import {UserName} from '路径';
//引用函数
import {add} from '路径';

//引用时 有冲突 使用别名 as
import {UserName as 别名 } from '路径';

2.全部引用过来

//全部引入 写对应的常量名或者函数名
// UserName  PassWord为变量名， add reduce为函数，
import {UserName,PassWord,add,reduce} from '路径';
// 起一个别名代替  UtilFuc 为别名
import * as UtilFuc 别名 from '路径';

1.如果是直接使用定义的名字，可以直接引用
console.log(UserName);
console.log(add(0,2));//add()函数使用
2.使用使用了别名
console.log(UtilFuc.UserName);
console.log(UtilFuc.add(0,2));//add()函数使用

• export default 使用

1.定义 

//使用 export default 导出
const ChainKey = '99999';//常量定义

function add(a,b){
    return a+b;
}
function reduce(c,d){
    return c-d;
}

export default {

UserName:'张辉',//
PassWord:'123456',
ChainKey: ChainKey,
add: add,
reduce: reduce
}

2.使用

import 变量名 from '路径';

console.log(BridgeUtil.age);//变量
console.log(BridgeUtil.name);//变量
console.log(BridgeUtil.ChainKey);//变量
console.log(BridgeUtil.userAgent('safari'));//函数

学习博客:

https://www.cnblogs.com/var-chu/p/11121624.html

https://www.cnblogs.com/qixidi/p/10143543.html

https://www.jianshu.com/p/a5f1eee4b63a