import和export

1、引入第三方插件

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

2、导入css文件

import './styles/iview.css';

3、导入css文件2

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

<style lang="less" scoped>
  @import url("./map.less");
  .task {
    color: #fff;
    height: calc(100vh - 200px);
  }
</style>

4、导入组件

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

5、引入工具类

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

}


//第二种是导入成组的方法
import * as tools from './libs/tools'

export function m1(a, b) {
    console.log(a + b);
}
export function m2(a, b) {
    console.log(a * b);
}

tools.m1(1,2)
tools.m2(1,2)

6、export 和 export default 的区别

• export、import可以有多个，但 export default 仅有一个；
• 通过export方式导出，在导入（import）时要加花括号{ }，export default 则不需要 { }。

export用法

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

import { str, log as _log } from 'a'; //可以用as重命名

export default 用法

var obj = { name: ‘example’ };
export default obj;

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

7、批量导入导出

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

import A from "./A.js"
A.helloWorld();
A.test();