ES6语法中引入&导出

在ES6中，在js中，肯定是使用export和import分别暴露模块和引入模块。
而然，使用过Vue.js的人，都会知道export default和export

export的英语：出口

import的英语：入口

而然，export和import，息息相关。

参考文档：https://blog.csdn.net/weixin_43318134/article/details/99242459

Node.js

我们在Node.js中，使用

var 名称=require('模块标识符');

来引入。
而暴露成员使用：

moudle.exports={}

或者：

      exports{}

而然在ES6中：

暴露

我们使用

export default{
}

或者

export {
}

来进行暴露。

我们用实例来看下。
我们创建一个try.js

export default{
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
}

或者这样也可以：

var vm={
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
}
export default vm;

我们在main.js中(或者index.js中，具体看package.json中main值)写入：

import vm from './try.js';
alert(vm.dem);

index.html中写入：

<!DOCTYPE html>
<html>
      <head>
            <title>Hello, World!</title>
            <meta charset="utf-8">
            <script src="./main.js"></script>
      </head>
      <body>
            
      </body>
</html>

WOW! Hello弹出来了！

我们在ElementUI中等等，按需引入使用

import { Button, Select } from 'element-ui';

直接引入了Button, Select。(.babelrc已修改)
而然，完整引入是

import ElementUI from 'element-ui';

这里我发现，修改ElementUI然后

Vue.use(ElementUI);

相应变化后，依然可以在项目中使用ElementUI。

怎么做到的？

其实，在import中，按需引入需要使用大括号包围，而暴露的js也需要相应地按需暴露。
才有了

import ElementUI,{Button,Select} from 'element-ui'

的出现。

如何相应暴露？
使用

export var 变量名=内容;

暴露，而main.js中使用

import {相应模块名字} from '地点';

来引入。
我们在try.js中写着

export var vm = {
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
};

main.js中写入

import {vm} from './try.js';

效果一样。