导入和导出的两种方法

1. commonJS 导出和导入

设置好方法       使用 module.exports 进行导出

function fn(fun) {
  console.log(`这是一个${fun}函数`);
}

const jian = (j) => {
  console.log(`这是一个${j}函数`);
};

module.exports = {
  fn: fn,
  jian: jian,
};

在vue文件里面使用  let log = require('../utils/commonjs') 进行导出赋值使用

<template>
    <div>
        <button @click="clickFn">click</button>
        <button @click="clickJian">click</button>
    </div>
</template>
<script>
let log = require('../utils/commonjs')
export default {
    data() {
        return {

        }
    },
    methods: {
        clickFn() {
            log.fn('fn')
        },
        clickJian() {
            log.jian('jian')
        }
    }
}
</script>

 2.使用ES6进行导出和导入

导出方法 直接使用 export 进行导出  或者使用 export default 进行 默认导出

// 按需到处
export function black(colorur) {
  console.log(`平时喜欢${colorur}`);
}

导入使用方法  使用 import { black } from '../utils/Es6' 进行导入来使用

<template>
    <div>
        <button @click="clickBlack">click</button>
    </div>
</template>
<script>
import { black } from '../utils/Es6'
export default {
    data() {
        return {

        }
    },
    methods: {
        clickBlack() {
            black('黑色的主题')
        }
    }
}
</script>