: 所需工具配置)
项目结构：
mock/
├── index.ts # Mock 入口
└── modules/
└── index.ts # 登录 Mock 数据
src/
├── utils/
│ ├── request.ts # Axios 封装
│
├── api/
│ ├── modules/
│ └── auth.ts # 认证工具,放了登陆相关接口
│
│
└── store/
└── modules/
└── user.ts # 用户状态管理
└── index.ts
1.引入Pinia：npm install pinia
2.引入mock、axios:
npm install vite-plugin-mock -D
npm install mockjs
npm install axios
配置mock（vite.config.ts）
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 引入自动导入组件插件 import Components from 'unplugin-vue-components/vite' // 引入 Ant Design Vue的解析器 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' // 引入mock import { viteMockServe } from 'vite-plugin-mock' import path from 'path' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ AntDesignVueResolver({ // 按需加载样式 importStyle: false, // 如果需要加载图标库，可以开启 resolveIcons: true }) ] }), viteMockServe({ mockPath: 'mock', // mock文件存放目录 enable: true, // 是否启用mock logger: true // 控制台显示请求日志 }) ] })3. npm install @types/node
配置上@路径(vite.vonfig.ts中，与plugins同级)
resolve: { alias: { '@': path.resolve(__dirname, './src') } }// tsconfig.node.json { "compilerOptions": { ...其他配置 "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["vite.config.ts"] }// tsconfig.app.json { "compilerOptions": { ...其他配置 "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] }最后按照项目结构加上对应的文件夹和文件
