关于VUE中 import 、 export 和 export default 的注意问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于VUE中 import 、 export 和 export default 的注意问题相关的知识,希望对你有一定的参考价值。

参考技术A import引入一个依赖包,不需要相对路径。
import 引入一个自己写的js文件,是需要相对路径的。

import axios from ‘axios’;
import AppService from ‘./appService’;

//a.js
export function getList();
//b.js
import getList from ‘./a.js’;

//a.js
var obj = name: ‘zhazhahui’ ;
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;

一个js文件中,只能有一个export default;
一个js文件中,可以有多个export。
export default 和 export 可以同时存在

(转)关于ES6的 模块功能 Module 中export import的用法和注意之处

export default 的用法

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,相反其它的export 输出 可以有多个,且import时必须加大括号,示例如下:

技术分享
 1 // modules.js
 2 function add(x, y) {
 3   return x * y;
 4 }
 5 export {add as default};
 6 // 等同于
 7 // export default add;
 8 
 9 // app.js
10 import { default as xxx } from ‘modules‘;
11 // 等同于
12 // import xxx from ‘modules‘;
技术分享

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句,而export需要跟变量声明或者大括号作为输出:

技术分享
 1 // 正确
 2 export var a = 1;
 3 
 4 // 正确
 5 var a = 1;
 6 export default a;  // 写法1
 7 export {a}  // 写法2
 8 
 9 // 错误
10 export default var a = 1;
技术分享

 

import 时候的路径问题(新手容易碰到)

开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:

1 import * as obj from ‘exports‘
2 // node 会试着去寻找 node_modules/exports.js 模块
3 
4 // 正确写法
5 import * as obj from ‘./exports‘

 

关于 import * as obj from ‘xx‘  这种写法是把所有的输出包裹到obj对象里

对了,还有模块的继承写法:

技术分享
 1 // circle.js
 2 export var a = 1;
 3 
 4 // circleplus.js 当前模块继承了 circle 模块的所有输出
 5 // 此处只是继承了输出,并不能直接使用
 6 
 7 export * from ‘circle‘;
 8 export var e = 2.71828182846;
 9 export default function(x) {
10   return Math.exp(x);
11 }
12 
13 // 继承之后,circleplus.js 相当于下面代码
14 export var a = 1;
15 export var e = 2.71828182846;
16 export default function(x) {
17   return Math.exp(x);
18 }
技术分享

 

以上是关于关于VUE中 import 、 export 和 export default 的注意问题的主要内容,如果未能解决你的问题,请参考以下文章

关于 vue中 export default 和 new Vue({})

Vue export和import

Vue export(导出)、import(导入)

vue中import xxx from 和 import xxx from的区别

(转)关于ES6的 模块功能 Module 中export import的用法和注意之处

Django-Import-Export插件关于外键的处理