vite + vue3 + ts + pinia + vue-router + axios + scss + 自动导入api
时间: 2023-08-18 10:08:21 浏览: 150
对于使用 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 的基本设置。你可以根据自己的需求进一步配置和扩展。希望对你有所帮助!