vue项目如何简化封装import导入路径

为什么要简化import导入

• 项目层级过多 或在大量使用或导入路径的时候, 会写的非常的长
• 打个比方 其实有10个vue文件 , 每个文件都需要这样导入来拿内容( 头疼啊 )

// 一个vue文件引入这么多 又这么长 确实增加的代码的负担
 import { xxx } from '../store/modules/user.js'
 import { xxx } from '../store/modules/message.js'
 import { xxx } from '../store/modules/mine.js'

• 如果可以简化每个vue文件中的代码是不是很好呢 , 比如在一个vue文件中 , 我想直接引入根目录就可以导入所有的呢?

    import { xxx,xxx,xxx } from '../store'

场景

假设我们有个使用pinia的场景 目录结构如下

• 因为index.ts是主文件 , 首先我们可以在index.ts里写

import { createPinia } from 'pinia'
// / 创建pinia实例
const pinia = createPinia()
// 导出pinia实例，给main使用
export default pinia

//------------------------------------------------
// 我们可以在pinia的根文件中导入其他模块并且再次导出
// 这样的话就可以在vue文件中直接访问store就可以拿到对应的内容了
// import { xxx,xxx,xxx } from '../store'

 import { useUserStore } from './modules/user'
 export { useUserStore }

• 但是这样的话, 每次在modules中增加了新的导出后 , 还是要去维护index.ts里的代码 , 感觉依旧很麻烦

//import { useUserStore } from './modules/user'
 //export { useUserStore }
// ---------------  简化---------------------
export * from './modules/user'
...每次新增了modules里的文件 直接在下面导入就行

• 这样在vue文件中 使用起来就很方便了