使用 vite、typescript、vue3、element-plus、pinia、vue-router、axios、tailwindcss 等技术搭建一个基本的项目模版

对于使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的设置，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Node.js，并且版本大于等于 12.0.0。 2. 创建一个新的 Vue 项目，可以使用 Vue CLI 或者手动创建一个空文件夹。 3. 在项目根目录下，打开终端并执行以下命令安装 Vite： ```bash npm init vite@latest ``` 按照提示选择你的项目配置，包括选择 Vue 3、TypeScript 和其他选项。 4. 进入项目目录并安装依赖： ```bash cd your-project-name npm install ``` 5. 安装 Pinia 插件： ```bash npm install pinia ``` 6. 创建一个 `src/store` 目录，并在其中创建 `index.ts` 文件，用于定义和导出你的 Pinia store。 ```typescript // src/store/index.ts import { createPinia } from 'pinia' export const store = createPinia() // 可以在这里定义你的 store 模块 ``` 7. 在项目根目录下创建 `src/api` 目录，用于存放 API 请求相关的文件。 8. 在 `src/api` 目录下创建一个 `index.ts` 文件，用于自动导入所有 API 文件。 ```typescript // src/api/index.ts const modules = import.meta.globEager('./*.ts') const apis: any = {} for (const path in modules) { if (path !== './index.ts') { const moduleName = path.replace(/^.\/|\.ts$/g, '') apis[moduleName] = modules[path].default } } export default apis ``` 这样，你就可以在 `src/api` 目录下创建各种 API 请求的文件，例如 `user.ts`： ```typescript // src/api/user.ts import axios from 'axios' export function getUser(id: number) { return axios.get(`/api/user/${id}`) } ``` 然后，在你的组件中使用自动导入的 API： ```typescript import { defineComponent, ref } from 'vue' import { useUserStore } from '@/store' import apis from '@/api' export default defineComponent({ setup() { const userStore = useUserStore() const userId = ref(1) const fetchUser = async () => { const response = await apis.user.getUser(userId.value) userStore.setUser(response.data) } return { userId, fetchUser, } }, }) ``` 以上就是使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的基本设置。你可以根据自己的需求进一步配置和扩展。希望对你有所帮助！