目录自动导入

本项目组织结构为实际项目中千锤百炼打磨而成，主打一个快，狠，准。

每个目录和位置都有其深刻内涵，请勿轻易改动。

.
├── public
│   └── logo.png
├── src
│   ├── assets 资源目录
│   │   └── logo.png
│   ├── components 全局组件（自动导入）
│   │   └── .gitkeep
│   ├── config 配置目录（自动导入）
│   │   └── .gitkeep
│   ├── env 环境变量 （手动指定）
│   │   ├── .env.development
│   │   └── .env.production
│   ├── i18n 国际化 （自动导入）
│   │   ├── en.json
│   │   └── zh.json
│   ├── layouts 骨架目录 （手动指定）
│   │   └── default.vue
│   ├── pages 页面目录 （自动导入）
│   │   ├── index.vue
│   │   └── news.vue
│   ├── plugins 插件目录（自动导入）
│   │   ├── global.js 全局存储
│   │   ├── http.js 接口请求
│   │   ├── i18n.js 国际化
│   │   ├── router.js 页面路由
│   │   └── storage.js 本地存储
│   ├── styles 样式目录（自动导入）
│   │   ├── global.scss
│   │   └── variable.scss
│   ├── utils 工具函数（自动导入）
│   │   └── index.js
│   ├── App.vue 挂载页面
│   └── main.js 页面入口
├── index.html 单页页面
├── jsconfig.json
├── LICENSE
├── yite.config.js（配置文件）
├── eslint.config.js
├── package.json
└── README.md

以上标记为 自动导入 的目录，均可以直接使用其导出的变量或组件。

比如 plugins/router.js 文件的代码如下：

import { yiteRoutes } from 'virtual:yite-router';

// 创建路由
const $Router = createRouter({
    routes: yiteRoutes(),
    history: createWebHashHistory()
});

export { $Router };

那么我们再页面中无需手动导入，直接使用即可：

<template>
    <div @click="$Method.onJumpHome">news</div>
</template>
<script setup>
// 设置集
defineOptions({
    name: 'NewsIndex'
});

// 数据集
const $Method = {
    // 跳转到首页
    onJumpHome() {
        $Router.push('/');
    }
};
</script>

所有自动导出的目录均是如此，只要被 export 导出的变量或函数，都可以直接使用，无需手动导入。

依赖自动导入

另外，还有几个模块依赖，其中的变量、属性、函数都是自动导出的：

1. vue
2. vue-router
3. pinia

也就是说，以上三个模块的所有变量，方法，与上面示例一样，无需手动导入，直接可用。

const 无需导入可用函数 = {
    'vue', // vue 的所有方法，变量
    'vue-router': [
        //
        'RouterLink',
        'RouterView',
        'START_LOCATION',
        'createMemoryHistory',
        'createRouter',
        'createWebHashHistory',
        'createWebHistory',
        'isNavigationFailure',
        'loadRouteLocation',
        'onBeforeRouteLeave',
        'onBeforeRouteUpdate',
        'useLink',
        'useRoute',
        'useRouter'
    ],
    pinia: [
        //
        'PiniaVuePlugin',
        'acceptHMRUpdate',
        'createPinia',
        'defineStore',
        'disposePinia',
        'getActivePinia',
        'mapActions',
        'mapGetters',
        'mapState',
        'mapStores',
        'mapWritableState',
        'setActivePinia',
        'setMapStoreSuffix',
        'skipHydrate',
        'storeToRefs'
    ]
};

自定义自动导入

如果以上自动导入不能满足你的需求，那么仍然可以手动配置自动导入的内容。

只需在 yite.config.js 配置文件中的 autoImport.imports 进行如下设置：

export const yiteConfig = {
    devtool: false,
    // 自动导入
    autoImport: {
        resolvers: [],
        imports: [
            {
                axios: ['default', 'axios'], // import { default as axios } from 'axios',
                '@vueuse/core': [
                    // 具名导出
                    'useMouse', // import { useMouse } from '@vueuse/core',
                    // 别名导出
                    ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
                ]
            }
        ]
    },
    // 自动组件
    autoComponent: {
        resolvers: []
    },
    // vite自定义 配置
    viteConfig: {
        optimizeDeps: {
            include: [
                //
                'vue-i18n',
                'axios',
                'store2'
            ]
        }
    }
};