一、import

import在引入文件路径时，引入一个依赖包，不需要相对路径。如：import app from ‘app’;，但引入一个自己写的js文件，是需要相对路径的。如：import app from ‘./app.js’;。

引入第三方插件

import Vue from 'vue';
import echarts from 'echarts';
import ElementUI from 'element-ui';

导入css文件

import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
import 'iview/dist/styles/iview.css';

如果是在.vue文件中，需要在其外面套一个style

<style>
  @import './test.css';
</style>

导入组件
 

import name1 from './name1';
import name2 from './name2';
import App from './app.vue';
components:{
  name1,
  name2,
  App,
},

import '@…'的语句

@等价于/src这个目录，避免写麻烦而又易错的相对路径

引入工具类

//第一种是引入单个方法
import {axiosfetch} from './util';
//下面是方法，需要export导出
export function axiosfetch(options) {}

//第二种是导入成组的方法
import * as tools from './libs/tools'
//其中tools.js中有多个export方法,把tools里所有export的方法导入
//vue中怎么用呢？
//Vue.prototype.$tools = tools
//直接用 this.$tools.method调用就可以了 

export和export default的区别：

//先是 export 
import {axiosfetch} from './util';  //需要加花括号，可以一次导入多个也可以一次导入一个，但都要加括号
//如果是两个方法
import {axiosfetch,post} from './util'; 
//再是 export default 
import axiosfetch from './util';  //不需要加花括号，只能一个一个导入
 

二、export和export default

export 与import是es6中新增模块功能最主要的两个命令：
1.export与export default均可用于导出常量、变量、函数、文件、模块等；
2.在一个文件或模块中，export、import可以有多个，但export default仅有一个；
3.通过export方式导出，在导入（import）时要加花括号{ }，export default则不需要话跨好{ }。

使用export导出的变量需要用{}进行导入

导出常量str和导出函数log：

//a.js
export const str = "blablabla~";
export function log(sth) {
    return sth;
}

对应的导入常量str和函数log的方式：

//b.js
import { str, log as _log } from 'a'; //也可以分开写两次，导入的时候带花括号。还可以用as重命名

使用export default导出的变量，只需要自己起一个名字就行

导出变量obj（一个对象）

//a.js :
var obj = { name: ‘example’ }; 
export default obj; 

对应的导入变量obj，并命其名为newName

//b.js: 
import newNname from './a.js';   //newNname 是自己随便取的名字，这里可以随便命名
console.log(newNname.name);       // example;

总结

export和export default最大的区别就是export不限导出的变量数，可以一直写，在同一个js文件中可以有多个，而export default只输出一次，在同一个js文件中只能有一个。而且 export导出的变量想要导入使用必须使用大括号{}来盛放，而export default不需要，只要import任意一个名字来接收对象即可。

部分导出导入和全部导出导入
部分导出导入

部分导出导入的优势，在于，当资源比较大时，使用部分导出可以减少资源体积，比如element-ui官方就推荐使用部分导入来减少项目体积，因为element-ui是一个十分庞大的框架，如果我们只用到其中的一部分组件， 那么只将用到的组件导入就可以了。

部分导出

//部分导出
//A.js
export function helloWorld(){
 conselo.log("Hello World");
}
export function test(){
 conselo.log("this's test function");
}

部分导入

//部分导入
//B.js
import {helloWorld} from "./A.js" //只导入A.js中的helloWorld方法，是为部分导入
helloWorld(); //执行utils.js中的helloWorld方法

如果我们需要A.js中的全部资源,则可以全部导入，如下：

import * as _A from "./A.js" //导入全部的资源，_A为别名，在调用时使用
_A.helloWorld(); //执行A.js中的helloWorld方法
_A.test(); //执行A.js中的test方法

全部导出导入

如果使用全部导出，那么使用者在导入时则必须全部导入，推荐在写方法库时使用部分导出，从而将全部导入或者部分导入的权力留给使用者。需要注意的是：一个js文件中可以有多个export，但只能有一个export default。

全部导出

//全部导出  A.js
var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}

全部导入

//全部导入  B.js
import A from "./A.js"
A.helloWorld();
A.test();

四、module.exports和exports

模块的导出导入规范，在总体上区分为两类：CommonJS模块规范和ES6模块规范。require: 是node 和 es6 都支持的引入，export/export default/ import: 是只有es6 支持的导出导入，module.exports / exports: 是只有 node 支持的导出。

CommonJS规范

Node里面的模块系统遵循的是CommonJS规范。CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)。为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;

具体的可参考测试代码
新建utils.js

console.log('1=', module.exports); // 结果为：{}
console.log('2=', exports); // 结果为：{}

exports.a = 200; // 由于默认 exports=module.exports 故此时把module.exports的值也改变了 {a : 200}

console.log('3=', module.exports) // {a : 200}
console.log('4=', exports) // {a : 200}

exports = '我不在指向module'

console.log('5=', module.exports) // {a : 200}
console.log('6=', exports) // 我不在指向module

新建test.js引入utils.js

var util = require('./utils')

console.log('test=', util) // { a: 200 }

从上面可以看出，其实require导出的内容是module.exports的指向的内存块内容，并不是exports的。简而言之，区分他们之间的区别就是 exports 只是 module.exports的引用，辅助后者添加内容用的。好多建议尽量都用 module.exports 导出，然后用require导入。

示例代码
hello.js

!function(){
  module.exports = function(name,age,money) {
    this.name = name;
    this.age = age;
    this.money = money;
    this.say = function() {
      console.log('我的名字叫：'+this.name+'，我今年'+this.age+'岁，月薪为：'+this.money+'元；')
    }
  };
}()

hello2.js

module.exports = function(name,age,money) {
  this.name = name;
  this.age = age;
  this.money = money;
  this.say = function() {
    console.log('我的名字叫：'+this.name+'，我今年'+this.age+'岁，月薪为：'+this.money+'元；')
  }
};

hello3.js

function sayDog () {
  console.log('i am dog')
}

function sayCat () {
  console.log('i am cat')
}

exports.sayDog = sayDog
exports.sayCat = sayCat

index.js

var Hello = require('./hello');
var hello = new Hello('jone','28','10000')
hello.say(); 

var Hello2 = require('./hello2');
var hello2 = new Hello2('hello2','28','10000')
hello2.say(); 

var h3 = require('./hello3')
h3.sayDog()
h3.sayCat()

输入结果如下

 

ES6规范

不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。在我们的项目中 使用场景如api的封装。

/*
 * 帮助文档查询api
 * @Author: shichangchun
 * @Date: 2018年8月30日14:22:15
 */
import fetch from '@/util/fetch'

/**
 * 查询文章 add 2018-10-19
 */
export const getArticleByPath = (data) => {
  return fetch({
    url: '/api/help/contentTxtByPath',
    method: 'GET',
    params: data
  })
}

/**
 * 查询目录 add 2018-10-19
 */
export const getMuneByPath = (data) => {
  return fetch({
    url: '/api/help/contentNewByPath',
    method: 'GET',
    params: data
  })
}

/**
 * 首页查询
 * @param data
 */
export const getHelpList = (data) => {
  return fetch({
    url: '/api/help/catalogByPath',
    method: 'GET',
    params: data
  })
}

在组件中引用

 

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系,即import{ ‘对应名称1’，‘对应名称2’} from ’api‘。使用export default命令，为模块指定默认输出。

另外：
export与export default均可用于导出常量、函数、文件、模块等；
在一个文件或模块中，export、import可以有多个，export default仅有一个；
通过export方式导出，在导入时要加{ }，export default则不需要；
export能直接导出变量表达式，export default不行。
————————————————
版权声明：本文为CSDN博主「微步_ym」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yiminghd2861/article/details/118856597