zoukankan      html  css  js  c++  java
  • ES6语法中引入&导出

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

    来进行暴露。

    我们用实例来看下。
    我们创建一个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';
    

    效果一样。

  • 相关阅读:
    【习题 8-9 1613】 K-Graph Oddity
    【习题 8-8 UVA
    【Hello 2018 D】Too Easy Problems
    【Hello 2018 C】Party Lemonade
    【Hello 2018 B】Christmas Spruce
    【Hello 2018 A】 Modular Exponentiation
    【习题 8-7 UVA
    【习题 8-6 UVA
    【习题 8-4 UVA
    【习题 8-3 UVA
  • 原文地址:https://www.cnblogs.com/7086cmd/p/es6importexport.html
Copyright © 2011-2022 走看看