熟悉 import 和 import {} 和export const 和 export default 和 export { default as } 等等的使用

这些是属于ES6的用法，作用是导入导出，可以导出变量、函数、对象，可以导入变量、函数、对象、文件总是有点混乱，这次就详细的整理下这几个导入导出的区别和具体的使用

1、最简单     导出一个变量

这是index.js文件
export const hh = 123;
export const h1 = 111;

这是index.vue文件
import wwJS from "./importexport.js"   ❌
打印： wwJS undefined      连文件里的代码都不直接返回了，错大了

import {wwJS} from "./importexport.js"     ❌
打印： wwJS undefined

import { hh } from "./importexport.js"    直接就是对应的文件   ✅✅
打印： hh 123

解析：export const可以导出多个，所以需要 {hh, h1} 对象包裹来解析 

2、基础 导出一个对象

这是index.js文件
const hh = 123;
const h1 = 111;
export default {
    hh,
    h1
}

这是index.vue文件
import  wwJS   from "./importexport.js"     直接就是对应的文件   ✅✅
打印：wwJS   {hh:123, h1: 111 }

import {wwJS} from "./importexport.js"  ❌
打印： wwJS   undefined

import { hh } from "./importexport.js"  ❌
打印： hh   undefined

export default 导出一个对象，所以可以直接定义一个新的命名wwJS 来代替整个对象 

3、中等   导入一个vue文件，接着直接导出

这是login.js文件
export default {
    name: 'login',
    data() {}
} 

这是 components.js文件
import Login from './Login.vue';
export default Login; 

这是index.vue文件
import Login from './components';

解析：
（看上面的第1点和第2点）一般我们会在.js文件使用export 导出，接着在.vue文件使用import，这是一般的使用用法，
而.vue文件也是有export 导出，则可以在.js文件使用import ，（看上面的第3点的文件component.js文件）就是在.js里import了一个文件，同时在export出去

4、难  导入多个vue文件，接着全部直接都导出  export  { default as } 的用法

这是 components.js文件
export { default as Login } from './Login.vue';
export { default as Logout } from './Logout.vue';


上面这种export { default as }等价于下面这种简单写法如下：
import Login from "./Login"
import Logout from "./Logout"
export default { Login, Logout}

这是index.vue文件
import {Login, Logout} from './components';

 解析：这种是在第3的基础上，使用更简洁的写法
 优点：统一导出资源，把多个模块，进行批量导出的 （例如上面导出了登录、退出的组件）