vue是近几年火热起来的一门js渐进式框架，vue的优势很多，例如轻量级、简单易学、双向数据绑定、组件化、数据和结构的分离、响应式数据绑定、虚拟DOM、运行速度快等，vue是面对模块化的开发，开发中导入导出模块是必不可少的，如何使用ES6和Node导入导出模块呢。

一、使用ES6语法(ES6模块规范)导入导出模块

使用export default（默认导出）向外暴露成员

新建test.js写入下列代码

export default {
    name:'张三',
    age:20
}

上面通过export default向外暴露了一个对象

使用import导入上模块

import zs from './test.js'

上面导入test.js中暴露的对象并赋值给变量zs,zs为自定义变量名

注意：

1. export default 向外暴露的成员，可以使用任意的变量来接收
2. 在一个模块中,export default只允许向外暴露一次

使用export（按需导出）向外暴露成员

在test.js写入下列代码

export var title = '小星星'

上面通过export向外暴露了一个字符串，title为自定义变量名

使用import导入模块

import {title} from './test.js'

上面导入test.js中暴露的对象，对象名为test.js中的title

注意：

1. 使用export向外暴露的成员，只能使用{ }的形式来接受，这种形式，叫做【按需导出】
2. export可以向外暴露多个成员，同时，如果某些成员，我们在导入的时候，不需要，则可以不在{ }中定义，同时导入多个使用英文逗号分隔
3. 使用export导出的成员，必须严格按照导出时候的名称来使用{ }按需接收
4. 使用export导出的成员，可以使用as来起别名，例如import {title as hello} from './test.js'

导入上列所有暴露的成员示例：import zs,{title as hello} from './test.js'

二、使用node.js语法(CommonJs模块规范)导入导出模块

使用model.exports向外暴露成员

新建test.js写入下列代码

model.exports = {}

上面使用了model.exports向外暴露了一个空对象

使用requite导入模块

var test = require('./test.js')

上面导入test.js中暴露的对象并赋值给变量test,test为自定义变量名

转载标明出处
本文链接:https://imold.wang/front-end/jsframe/vue/452.html
仿冒必究