vue 中使用export、export default、module.exports

export

export function listFun1() {
  let list = [
    {
      id: 1,
      name: "张三",
    },
    {
      id: 2,
      name: "李四",
    },
    {
      id: 3,
      name: "小明",
    },
  ];
  return list;
}

export function listFun2() {
  let list = [
    {
      id: 1,
      name: "小红",
    },
    {
      id: 2,
      name: "小黄",
    },
    {
      id: 3,
      name: "小绿",
    },
  ];
  return list;
}

在vue中使用

<template>
<div class="contentClass"></div>
</template>
<script>
import { listFun1, listFun1} from "./charts";
export default {
  name: "list", 
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {},
  created() {
    console.log(listFun1());
    console.log(listFun2());
  },
};
</script>

结果.png

1、export 只是 向外面暴露一个函数，在 vue 中引入该 js 时，要指定引用的具体函数名。
2、不可以使用 import test1 from "./charts" 引用 这样出来的结果是undefined
3、import { listFun1, listFun1} from "./charts" ，花括号里面指定的是 js 的具体函数，获取出来的数据，就是该函数 return 出来的数据。

export default

export default {
  list1: [
    {
      id: 1,
      name: "张三",
    },
    {
      id: 2,
      name: "李四",
    },
    {
      id: 3,
      name: "小明",
    },
  ],
  list2: [
    {
      id: 1,
      name: "小红",
    },
    {
      id: 2,
      name: "小黄",
    },
    {
      id: 3,
      name: "小绿",
    },
  ],
  FunList: () => {
    return '123456'
  }
// 后续加的
  OptionFun: (echartData) => {
     const option = {
          color: ['#e97008', '#59eaff', '#e4c017', '#f12802'],
    }
    return option
  }
}

在vue中使用

<template>
<div class="contentClass"></div>
</template>
<script>
import chartsRisk from "./charts";
export default {
  name: "list", 
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {},
  created() {
    console.log(chartsRisk);
    console.log(chartsRisk.list1);
    console.log(chartsRisk.list2);
    console.log(chartsRisk.FunList());
    // 后续加的
    console.log(chartsRisk.OptionFun(data));
  },
};
</script>

结果.png

1、export default 默认导出一个对象，对象的每一项可以是数组、函数
2、一个js 文件只能有一个 export default
3、在 vue 中引入该 js 时，import charts from "./charts"
4、访问对象的属性或调用函数，直接chartsRisk.list1、chartsRisk.FunList()

后续添加-------export default

const voiceFun = {};
voiceFun.initVoice = () => {}
voiceFun.voiceBroadcast = (text) => {}
voiceFun.closeVoice = () => {}
export default voiceFun;

// 调用
import voiceFun from '@/util/voice.ts';
voiceFun.initVoice()
voiceFun.voiceBroadcast ()
voiceFun.closeVoice ()

module.exports

const list1 = [
  {
    id: 1,
    name: "张三",
  },
  {
    id: 2,
    name: "李四",
  },
  {
    id: 3,
    name: "小明",
  },
]
const fun1 = function () {
  return '123456'
}
const FunList = () => {
  const list = [
    {
      id: 1,
      name: "小红",
    },
    {
      id: 2,
      name: "小黄",
    },
    {
      id: 3,
      name: "小绿",
    },
  ]
  return list
}

module.exports = {
  list1,
  fun1,
  FunList
}
// 也可以重新命名
// module.exports = {
//   objlist1:list1,
//   objlist2:fun1,
// };

在vue中使用

<template>
<div class="contentClass"></div>
</template>
<script>
export default {
  name: "list", 
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {},
  created() {
   const myModule = require('./charts');
    console.log(myModule)
  },
};
</script>

module.export 相当于集中起来导出去，导出的为一个对象
vue是运行环境是ES6 模块， module.export 是使用 CommonJS 模块系统，这是 Node.js 默认的模块系统，
所以使用module.export就得兼容Node.js。