Module 语法：import ...与import{ }的区别/export与export default的区别

import … from ‘路径’ ：将文件作为一个整体引入

import {} from ‘路径’ ：引入文件的一部分或某些部分的时候会使用带{}的方式

通过export方式导出，在导入时要加{ }，export default则不需要，因为它本身只能有一个

注：export与export default的区别

1.export 可以直接导出或者先定义后导出都可以，export default只能先定义后导出；
2.export输出方式可以输出一个或多个，而export default只能输出一个；
3.export导出的对象，导入时写法：import { 变量名1,变量名 2,…} from ‘路径’，export default导出的对象，导入时写法：import 变量名 from ‘路径’

1.export输出方式

//index.js 页面

export const login= 'api/login' // 登录接口
export const logon= 'api/logon' // 注册接口
export const logoff= 'api/logoff' // 注销接口

2.export default输出方式

//indexA.js 页面

const login= 'api/login' // 登录接口
const logon= 'api/logon' // 注册接口
const logoff= 'api/logoff' // 注销接口

export default {
	login,
	logon，
	logoff
}

3.不同输出方式，导入时写法及用法

//index.vue 页面

<template>
//省略不相关代码...
</template>

<script>
import { login,logon,logoff } from '@/api/index.js'; 
import myAPi from '@/api/indexA.js'; 

 data () {
    return {
      userInfoData: {},
    };
  },

methods: {
  //import 引入后使用
  goLoginA（）{
    this.http.request({  //http为封装的请求方法
       url: myAPi.login,
       data: '',
        success: (res)=> {
          this.userInfoData = res;
        },
    })
  }，

  //import{ } 引入后使用
  goLoginB（）{
    this.http.request({  //http为封装的请求方法
       url: login,
       data: '',
        success: (res)=> {
          this.userInfoData = res;
        },
    })
  }
}
</script>

<style lang="less">
//省略不相关代码...
</style>

4.export输出方式示例

//如下三个export都是可以的

export const login= 'api/login' // 登录接口
export const logon= 'api/logon' // 注册接口
export const logoff= 'api/logoff' // 注销接口

5.export default输出方式示例

const login= 'api/login' // 登录接口
const logon= 'api/logon' // 注册接口
const logoff= 'api/logoff' // 注销接口

//如下可一次性输出
export default {
	login,
  login，
  logoff
}

//如下三个export default一起用，报错：Only one default export allowed per module
//export default login
//export default logon
//export default logoff