码迷,mamicode.com
首页 > 其他好文 > 详细

ES6语法中引入&导出

时间:2020-06-09 16:55:51      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:pow   odk   vb6   引入   fit   upm   avl   sax   wce   

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

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 {
}

来进行暴露。

(题外话,这个ECMAScript2015没有的)

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

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

或者这样也可以:

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

我们在main.js中(或者index.js中,具体看package.jsonmain值)写入:

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‘;

效果一样。

ES6语法中引入&导出

标签:pow   odk   vb6   引入   fit   upm   avl   sax   wce   

原文地址:https://www.cnblogs.com/7086cmd/p/es6importexport.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!