写法一：
vue文件
<template><div class="index"><div>{{zuopin}}</div><h2>{{content.name}}</h2><h2>{{content.title}}</h2><div class="box" v-for="item in info" :key="item.id"><h2>{{item.name}}</h2><p>{{item.title}}</p></div></div>
</template>
<script>
import {box_Data} from "@/assets/js/indexdata";
import {box2_data} from "@/assets/js/indexdata";export default{name:'index',data(){return{zuopin:'作品集',info:box2_data,content:box_Data}},}
</script>
index.js文件
const box_Data = {name:`作者名称`,title:`作品名称`,
}
const box2_data = [{id:`1`,name:`史铁生`,title:`《我与地坛》`,},{id:`2`,name:`路遥`,title:`《平凡的世界》`}
]
export {box_Data,box2_data
}
写法二：
partten.js 文件用于存放需要的常量 使用export const 进行声明
export const textLength = 30;
export const areaLength = 500;
export const phoneNum = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
export const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
引入
import * as pattern from './pro'created() {console.log('pattern', pattern)},
写法三：
config.js
//定义变量或常量
const URL_CONFIG = {URL: 'https://blog.csdn.net/firstlt0217/article/details/107863081',
};
const URL_CONFIG2 = {URL: 'https://blog.csdn.net/firstlt0217/article/details/107863081',
};
//定义方法test
function test () {const url = 'https://blog.csdn.net/firstlt0217/article/details/107863081';console.log(url);return url;
}
//导出设置使得Vue可引入，关键
export{URL_CONFIG,URL_CONFIG2,test
}
vue文件中引入
<template><div><p>url:{{url}}</p><button v-on:click="testvue ">显示URL</button><p>url2:{{url2}}</p></div>
</template>
<script>import { URL_CONFIG,test } from './js/config.js' //引入
export default {name: 'Vuetest',data: function () {return {url: URL_CONFIG.URL,url2:""}},methods: {testvue () {this.url2=test()}}
}
</script>
<style scoped>
</style>
可注册为全局
Vue文件在src文件目录下，可以import…；如果在静态文件夹static目录下，可以在主页面index.html引入
在main.js中引入
import * as testUrl from './components/config'
Vue.prototype.Global=testUrl;//加载到Vue原型属性
全局变量使用
this.Global.URL_CONFIG.URL
二、export 和 export default 的区别
相同点：
1）利用export和export default关键字输出自定义独立文件（也成为一个模块）中的所有变量、方法等，
以提供外部使用。模块：即独立的XXX.js文件
2）export与export default均可用于导出常量、函数、文件、模块等
不同点：
1）在一个文件或模块中，export、import可以有多个，export default仅有一个
2）通过export方式导出，在导入时要加{ }，export default则不需要(1) 输出单个值，使用export default(2) 输出多个值，使用export(3) export default与普通的export不要同时使用出现问题：当使用export default {a, b, c, d} 容易造成嵌套多层；结果：{a: {a, b, c, d}, b:{a, b, c, d}, c:{a, b, c, d}, d:{a, b, c, d}} //error
export：
1）export命令对外接口的名称是一定的、不变的；
2）import命令从模块导入的变量名与被导入模块对外接口的名称相同；即大括号里面的变量名，
必须与被导入模块（xxx.js）对外接口的名称相同；
3）如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。import { name as newname } from './xxx.js';
export default：
1）export default命令，为模块指定默认输出。即一个模块只能有一个默认输出，也就是一个
模块export default命令只能使用一次，因此export default命令是唯一的，import命令后面
也就不用再加大括号。
2）export default命令对外输出的变量名可以是任意的，即其他模块加载该模块时，
import命令可以为该匿名函数指定任意名字。注意这时import命令后面，不使用大括号。
写法四：
comm.js
function nameJoin(name) {return `you name id ${name}`;
}
function test() {return 'test from comm.js';
}function test2() {return 'test2';
}
function test3() {return 'test3';
}const PI = 3.14;
// 默认导出（每个模块只能有一个）
export default {nameJoin,test,PI
};
// 直接导出
export function funName() {return 'you default name is FunName';
}
// 导出列表
export { test2, test3 };
<template><div><p>import中的常量使用:{{ getPI() }}</p><p>使用import导入的方法：{{ test2() }}</p></div>
</template>
<script>
// 通过import导入常量或方法
import comm, { test2, test3 } from './comm.js';
export default {data() {return {};},mounted() {//直接使用import导入的方法console.log('test', comm.test());console.log('test2', test2());},methods: {// 在methods中申明的import方法，可以tmplate中直接使用test2,// 通过方法可以直接使用import引入的方法getPI() {return comm.PI;}}
};
</script>
<style lang="scss" scoped></style>
// 导入整个模块的内容
import * as comm from './comm.js';
// 导入单个接口
import {test2} from './comm.js';
// 导入多个接口
import {test2,test3} from './comm.js';
// 重命名接口
import {test2 as newTest,test3} from './comm.js';
)
