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
仿冒必究