项目中使用`import`关键字导入文件方式

一. 默认导出

一个模块可能只有一个主要的导出内容时，你可以使用默认导出来简化导入过程。

a文件导出

const fun = () => {} 

export default fun ;

 b文件导入

import fun from "@/xx/b.js";
fun ()  //方法调用 返回abc

二. 具名导出

一个模块包含多个导出内容时，你可以使用具名导出来按需导入。

1.在声明前导出

a文件导出

export const useCounterStore = function () { return 'abc' };

b文件导入

import { useCounterStore } from "@/xx/b.js";
useCounterStor()  //方法调用 返回abc

2.导出与声明分开

a文件导出

const useCounterStore = function () { return 'abc' };

const a = function(){ return 'a' }

const b= function(){ return 'b' }

export { useCounterStore , a, b }  //导出变量列表

b文件导入

import { useCounterStore } from "@/xx/b.js";
useCounterStor()  //方法调用 返回abc

三. 其他

当命名冲突时, 使用 as 进行 重命名

import { a as abc } from ‘@/xx/xx.js’; 

总结

1. import 命名的导出时需要花括号，而 import 默认的导出时不需要花括号
2. 命名冲突时, 使用 as 进行 重命名