Guigu 甑选平台第一篇：项目初始化与配置

作者进击的野人

2026年2月4日 18:55

第一章：项目创建 - 使用Create Vue的理由和步骤

步骤1：使用官方脚手架创建项目

使用npm create vue@latest是因为这是Vue团队官方维护的脚手架工具，能够确保项目结构与最新Vue特性完全兼容。它集成了Vue社区的最佳实践和推荐配置，减少了手动配置可能出现的错误。交互式命令行让开发者能够按需选择功能模块。

bash

复制下载

# 执行创建命令
npm create vue@latest

# 交互式配置
√ Project name: ... guigu-zhenxuan-platform
√ Add TypeScript? ... Yes  # 选择TypeScript是为了提供类型安全，减少运行时错误
√ Add JSX Support? ... No  # 不使用JSX是因为Vue推荐使用模板语法，保持项目语法一致性
√ Add Vue Router for Single Page Application development? ... Yes  # 添加Vue Router是因为SPA应用必须的路由管理
√ Add Pinia for state management? ... Yes  # 选择Pinia是因为它是Vue官方推荐的状态管理库
√ Add Vitest for Unit Testing? ... No  # 不先添加单元测试是为了先搭建项目基础架构，测试可以后期添加
√ Add an End-to-End Testing Solution? ... No  # 不添加E2E测试是因为初期项目重点在功能开发
√ Add ESLint for code quality? ... Yes  # 添加ESLint是为了统一代码风格，提高代码质量
√ Add Prettier for code formatting? ... Yes  # 添加Prettier是为了自动格式化代码，避免团队成员间的格式争议

# 进入项目并安装基础依赖
cd guigu-zhenxuan-platform
npm install

初始化后的项目结构说明：

text

复制下载

guigu-zhenxuan-platform/
├── src/
│   ├── components/    # components目录用于存放可复用的UI组件
│   ├── views/         # views目录用于存放页面级组件，这是Vue Router的惯例命名
│   ├── router/        # router目录用于集中管理路由配置
│   ├── stores/        # stores目录用于存放Pinia状态管理文件
│   └── main.ts        # main.ts是Vue应用的入口文件
├── public/            # public目录用于存放不需要构建处理的静态资源
├── .eslintrc.cjs      # ESLint配置文件，使用.cjs扩展名是因为需要CommonJS格式
├── .prettierrc        # Prettier代码格式化配置文件
├── index.html         # HTML入口文件，浏览器通过这个文件加载应用
├── package.json       # 项目配置文件，管理依赖和脚本
├── tsconfig.json      # TypeScript编译配置文件
└── vite.config.ts     # Vite构建工具配置文件

第二章：修改Package.json - 详细配置解析

步骤1：更新scripts配置

scripts配置决定了项目的开发工作流，合理的配置能提高开发效率。

打开package.json，修改scripts部分：

json

复制下载

"scripts": {
  "dev": "vite --open",
  // 配置vite --open是为了启动开发服务器后自动打开浏览器，提升开发体验
  
  "build": "run-p type-check "build-only {@}" --",
  // 这样配置build命令是为了并行执行类型检查和构建过程，提高构建速度
  
  "preview": "vite preview",
  // preview命令用于预览生产环境构建结果，验证构建效果是否符合预期
  
  "build-only": "vite build",
  // 单独的build-only命令用于纯构建操作，方便在组合命令中调用
  
  "type-check": "vue-tsc --build",
  // 使用vue-tsc是因为它专门针对Vue单文件组件进行TypeScript类型检查
  
  "lint": "run-s lint:*",
  // 使用run-s是为了顺序执行所有lint相关任务，确保代码检查的完整性
  
  "lint:oxlint": "oxlint . --fix",
  // 配置oxlint是因为它相比ESLint有更好的性能表现，检查速度更快
  
  "lint:eslint": "eslint . --fix --cache",
  // 保留ESLint是因为它有成熟的生态系统和丰富的插件支持
  
  "format": "prettier --write --experimental-cli src/",
  // 使用--experimental-cli参数是为了启用Prettier新版本的命令行特性
  
  "preinstall": "node ./scripts/preinstall.js"
  // preinstall脚本用于在安装依赖前检查开发环境是否符合要求
}

步骤2：添加生产依赖

生产依赖是项目运行时必须的包，每个依赖都有特定的业务用途。

执行以下安装命令：

bash

复制下载

# 安装Element Plus UI组件库
npm install element-plus
# 安装Element Plus是因为它提供了丰富的企业级UI组件，能显著加快开发速度

# 安装Element Plus图标库
npm install @element-plus/icons-vue
# 安装图标库是为了提供丰富的图标资源，提升用户界面视觉效果

# 安装Axios HTTP客户端
npm install axios
# 安装Axios是因为它是一个功能强大的HTTP客户端，支持请求拦截、响应拦截等高级特性

# 安装Mock.js数据模拟库
npm install mockjs
# 安装Mock.js是为了在开发阶段模拟后端API数据，实现前后端并行开发

package.json中的dependencies部分配置如下：

json

复制下载

"dependencies": {
  "@element-plus/icons-vue": "^2.3.2",  // Element Plus图标组件
  "axios": "^1.13.4",                    // HTTP请求库，用于API调用
  "element-plus": "^2.13.1",             // UI组件库，提供基础界面组件
  "mockjs": "^1.1.0",                    // 模拟数据生成器
  "pinia": "^2.1.7",                     // 状态管理库，已由create-vue安装
  "vue": "^3.4.21",                      // Vue核心框架，已由create-vue安装
  "vue-router": "^4.3.0"                 // 路由管理库，已由create-vue安装
}

步骤3：添加开发依赖

开发依赖只在开发阶段使用，用于提升开发体验和保证代码质量。

执行以下安装命令：

bash

复制下载

# 安装TypeScript相关配置
npm install --save-dev @tsconfig/node24
# 安装@tsconfig/node24是为了使用Node.js 24的TypeScript配置预设

npm install --save-dev @vue/tsconfig
# 安装@vue/tsconfig是为了使用Vue官方推荐的TypeScript配置预设

npm install --save-dev @types/node
# 安装@types/node是为了获取Node.js API的类型定义

# 安装Vite插件
npm install --save-dev vite-plugin-mock
# 安装vite-plugin-mock是为了将Mock数据集成到Vite开发服务器中

npm install --save-dev vite-plugin-svg-icons
# 安装vite-plugin-svg-icons是为了优化SVG图标的使用体验

npm install --save-dev vite-plugin-vue-devtools
# 安装vite-plugin-vue-devtools是为了增强Vue开发工具的功能

# 安装代码质量工具
npm install --save-dev eslint-config-prettier
# 安装eslint-config-prettier是为了集成Prettier和ESLint，避免规则冲突

npm install --save-dev eslint-plugin-oxlint
# 安装eslint-plugin-oxlint是为了在ESLint中使用oxlint规则

npm install --save-dev oxlint
# 安装oxlint是因为它提供了比ESLint更快的JavaScript代码检查

# 安装工具库
npm install --save-dev npm-run-all2
# 安装npm-run-all2是为了并行或顺序运行多个npm脚本

npm install --save-dev jiti
# 安装jiti是为了提供TypeScript文件的即时编译能力

完整的devDependencies配置如下：

json

复制下载

"devDependencies": {
  "@tsconfig/node24": "^24.0.4",           // Node.js 24的TypeScript配置预设
  "@types/node": "^20.12.7",              // Node.js API类型定义
  "@vitejs/plugin-vue": "^5.0.4",         // Vite的Vue单文件组件插件
  "@vue/eslint-config-typescript": "^13.0.0", // Vue项目的TypeScript ESLint配置
  "@vue/tsconfig": "^0.5.0",              // Vue项目的TypeScript配置
  "eslint": "^9.0.0",                     // JavaScript代码检查工具
  "eslint-config-prettier": "^9.1.0",     // 关闭与Prettier冲突的ESLint规则
  "eslint-plugin-oxlint": "~1.42.0",      // oxlint的ESLint插件
  "eslint-plugin-vue": "^9.23.0",         // Vue.js的ESLint插件
  "jiti": "^1.21.0",                      // TypeScript即时编译工具
  "npm-run-all2": "^8.0.4",               // 并行运行npm脚本的工具
  "oxlint": "~1.42.0",                    // 高性能JavaScript linter
  "prettier": "3.2.5",                    // 代码格式化工具
  "typescript": "~5.3.3",                 // TypeScript编译器
  "vite": "^5.2.0",                       // 前端构建工具
  "vite-plugin-mock": "^3.0.2",           // Vite的Mock数据插件
  "vite-plugin-svg-icons": "^2.0.1",      // Vite的SVG图标插件
  "vite-plugin-vue-devtools": "^7.3.0",   // Vite的Vue开发工具插件
  "vue-tsc": "^1.8.27"                    // Vue单文件组件的TypeScript检查器
}

步骤4：配置引擎要求和Prettier

在package.json末尾添加以下配置：

json

复制下载

"engines": {
  "node": "^20.19.0 || >=22.12.0"
},
// 配置engines是为了明确项目所需的Node.js版本范围，确保开发环境一致性

"prettier": {
  "ignorePath": ".prettierignore"
}
// 配置prettier是为了指定忽略文件配置，避免对特定文件进行格式化

第三章：创建环境检查脚本

步骤1：创建预安装脚本

预安装脚本在npm install之前执行，用于检查开发环境是否符合要求。

bash

复制下载

# 创建scripts目录
mkdir scripts

# 创建preinstall.js文件
touch scripts/preinstall.js

编辑scripts/preinstall.js文件：

javascript

复制下载

// 检查Node.js版本是否符合项目要求
const currentNodeVersion = process.versions.node;
const semver = currentNodeVersion.split('.');
const major = parseInt(semver[0], 10);

// 项目要求Node.js 20.19.0或更高版本
if (major < 20) {
  console.error(
    '你正在使用 Node.js ' +
      currentNodeVersion +
      '。\n' +
      '本项目需要 Node.js 20.19.0 或更高版本。\n' +
      '请升级你的 Node.js 版本。'
  );
  process.exit(1);  // 退出进程，阻止继续安装
}

console.log('✅ Node.js 版本检查通过');
// 版本检查通过后，npm install会继续执行

这个脚本的作用：确保所有开发者在一致的Node.js环境下工作，避免因版本差异导致的兼容性问题。

第四章：配置HTML入口文件

步骤1：修改index.html

index.html是Web应用的入口文件，浏览器通过加载这个文件启动整个应用。

编辑index.html文件：

html

复制下载运行

<!DOCTYPE html>
<html lang="zh-CN">
  <!-- 指定中文语言是为了更好的无障碍支持和SEO优化 -->
  
  <head>
    <meta charset="UTF-8">
    <!-- 设置UTF-8编码是为了支持中文等多语言字符 -->
    
    <link rel="icon" href="/favicon.ico">
    <!-- 设置网站图标，提升品牌识别度 -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 配置viewport是为了实现响应式设计，适配移动设备 -->
    
    <title>硅谷甑选平台</title>
    <!-- 设置页面标题，显示在浏览器标签页上 -->
  </head>
  
  <body>
    <div id="app"></div>
    <!-- Vue应用挂载点，所有Vue组件将在这个div内渲染 -->
    
    <script type="module" src="/src/main.ts"></script>
    <!-- 使用type="module"启用ES模块支持，加载应用入口文件 -->
  </body>
</html>

第五章：配置TypeScript和Vite

步骤1：修改tsconfig.json

TypeScript配置文件决定了TypeScript编译器如何工作。

打开tsconfig.json，确保配置正确：

json

复制下载

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  // 继承Vue官方的TypeScript配置，减少手动配置工作量
  
  "compilerOptions": {
    "target": "ES2020",
    // 设置编译目标为ES2020，使用较新的JavaScript特性
    
    "useDefineForClassFields": true,
    // 使用ES2022的类字段定义方式
    
    "module": "ESNext",
    // 使用ES模块系统，支持tree-shaking
    
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    // 包含的库文件，提供类型提示
    
    "skipLibCheck": true,
    // 跳过库文件的类型检查，加快编译速度
    
    "moduleResolution": "bundler",
    // 使用bundler的模块解析策略，与Vite保持一致
    
    "allowImportingTsExtensions": true,
    // 允许导入TypeScript扩展名的文件
    
    "resolveJsonModule": true,
    // 允许导入JSON文件作为模块
    
    "isolatedModules": true,
    // 确保每个文件都能单独编译
    
    "noEmit": true,
    // 不输出编译文件，由Vite处理构建
    
    "jsx": "preserve",
    // 保留JSX语法，由其他工具处理
    
    "strict": true,
    // 启用所有严格类型检查
    
    "noUnusedLocals": true,
    // 检查未使用的局部变量
    
    "noUnusedParameters": true,
    // 检查未使用的函数参数
    
    "noFallthroughCasesInSwitch": true,
    // 检查switch语句的fallthrough情况
    
    "baseUrl": ".",
    // 设置基础路径为当前目录
    
    "paths": {
      "@/*": ["./src/*"]
    }
    // 配置路径别名，@表示src目录，简化导入路径
  },
  
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  // 包含需要编译的文件类型
  
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
    // 引用Node环境的TypeScript配置
  ]
}

步骤2：修改tsconfig.node.json

这个文件用于配置Node.js环境的TypeScript编译。

json

复制下载

{
  "extends": "@tsconfig/node24/tsconfig.json",
  // 继承Node.js 24的TypeScript配置预设
  
  "include": [
    "vite.config.ts",
    "scripts/**/*",
    "mock/**/*"
  ],
  // 包含Node环境下的TypeScript文件
  
  "compilerOptions": {
    "composite": true,
    // 启用复合编译，支持项目引用
    
    "noEmit": true,
    // 不输出编译文件
    
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
    // TypeScript构建信息文件位置
  }
}

步骤3：配置Vite构建工具

Vite配置文件决定了项目的构建行为和开发服务器配置。

打开vite.config.ts，修改为：

typescript

复制下载

import { fileURLToPath, URL } from 'node:url'
// 导入URL处理工具，用于处理文件路径
import { defineConfig } from 'vite'
// 导入Vite配置函数
import vue from '@vitejs/plugin-vue'
// 导入Vite的Vue插件，用于处理.vue文件
import { viteMockServe } from 'vite-plugin-mock'
// 导入Mock插件，用于开发阶段的数据模拟
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 导入SVG图标插件，优化图标使用
import VueDevTools from 'vite-plugin-vue-devtools'
// 导入Vue开发工具插件，增强调试能力
import path from 'path'
// 导入路径处理工具

export default defineConfig(({ command }) => ({
  // 根据命令模式（serve/build）返回不同配置
  
  plugins: [
    vue(),
    // Vue单文件组件插件，必须放在第一个
    
    viteMockServe({
      mockPath: 'mock',
      // Mock数据文件存放目录
      enable: command === 'serve',
      // 只在开发服务器启用Mock
    }),
    
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // SVG图标文件目录
      symbolId: 'icon-[dir]-[name]',
      // 图标ID生成规则
    }),
    
    VueDevTools(),
    // Vue开发工具插件
  ],
  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
      // 配置路径别名，@指向src目录
    }
  },
  
  server: {
    port: 3000,
    // 开发服务器端口号
    open: true,
    // 启动后自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        // 代理目标地址
        changeOrigin: true,
        // 修改请求头中的Origin字段
        rewrite: (path) => path.replace(/^/api/, '')
        // 重写请求路径，移除/api前缀
      }
    }
  }
}))

第六章：配置代码质量和样式

步骤1：创建样式重置文件

样式重置文件用于统一不同浏览器的默认样式，提供一致的基准样式。

bash

复制下载

# 创建styles目录
mkdir src/styles

# 创建reset.css文件
touch src/styles/reset.css

编辑src/styles/reset.css文件：

css

复制下载

/* 重置所有元素的默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 使用border-box盒模型，更符合开发直觉 */
}

/* 设置根元素和body的高度 */
html, body {
  height: 100%;
  /* 确保页面能占满整个视口高度 */
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* 设置字体栈，优先使用系统字体 */
}

/* 设置Vue应用容器的样式 */
#app {
  height: 100%;
  /* 应用容器占满整个父元素高度 */
}

步骤2：修改ESLint配置

ESLint配置文件定义了代码检查规则，确保代码质量一致性。

打开.eslintrc.cjs，修改为：

javascript

复制下载

/* eslint-env node */
// 声明当前文件运行在Node.js环境中

require('@rushstack/eslint-patch/modern-module-resolution')
// 使用ESLint补丁，解决模块解析问题

module.exports = {
  root: true,
  // 指定为根配置文件，ESLint不会向上查找其他配置
  
  extends: [
    'plugin:vue/vue3-essential',
    // Vue 3基础规则集
    'eslint:recommended',
    // ESLint推荐规则
    '@vue/eslint-config-typescript',
    // Vue的TypeScript配置
    '@vue/eslint-config-prettier/skip-formatting'
    // 跳过Prettier的格式化规则
  ],
  
  parserOptions: {
    ecmaVersion: 'latest'
    // 使用最新的ECMAScript版本
  },
  
  rules: {
    'vue/multi-word-component-names': 'off'
    // 关闭Vue组件必须多单词命名的规则
    // 因为有些基础组件如Login、Home使用单单词更合适
  }
}

步骤3：创建.prettierignore文件

Prettier忽略文件指定了哪些文件不需要进行代码格式化。

bash

复制下载

# 创建Prettier忽略文件
touch .prettierignore

编辑.prettierignore文件：

plaintext

复制下载

node_modules
# 忽略node_modules目录，因为这是第三方依赖

dist
# 忽略构建输出目录

*.min.js
# 忽略压缩的JavaScript文件

*.min.css
# 忽略压缩的CSS文件

第七章：配置项目核心文件

步骤1：修改main.ts文件

main.ts是Vue应用的入口文件，负责初始化Vue应用并注册各种插件。

打开src/main.ts，修改为：

typescript

复制下载

import { createApp } from 'vue'
// 导入Vue的createApp函数，用于创建Vue应用实例

import './styles/reset.css'
// 导入重置样式，确保样式一致性

import App from './App.vue'
// 导入根组件

import router from './router'
// 导入路由配置

import { createPinia } from 'pinia'
// 导入Pinia的createPinia函数，用于创建状态存储

// 导入Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入Element Plus及其样式

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 导入Element Plus的所有图标组件

// 创建Vue应用实例
const app = createApp(App)

// 创建Pinia状态存储实例
const pinia = createPinia()

// 注册Element Plus插件
app.use(ElementPlus)
// 注册路由
app.use(router)
// 注册Pinia状态管理
app.use(pinia)

// 注册所有Element Plus图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
  // 将每个图标注册为全局组件
}

// 将Vue应用挂载到HTML中的#app元素
app.mount('#app')

步骤2：修改App.vue文件

App.vue是应用的根组件，所有其他组件都在这个组件内渲染。

打开src/App.vue，修改为：

vue

复制下载

<script setup lang="ts">
// 使用<script setup>语法糖，简化组合式API的使用
// lang="ts"指定使用TypeScript

import { RouterView } from 'vue-router'
// 导入RouterView组件，用于渲染当前路由对应的组件
</script>

<template>
  <!-- 路由视图容器，根据当前路由显示不同的页面 -->
  <RouterView />
</template>

<style scoped>
/* scoped样式，只作用于当前组件 */
/* 可以在这里添加全局的样式规则 */
</style>

步骤3：配置路由

路由配置文件定义了应用的路由结构和页面导航逻辑。

打开src/router/index.ts，确保基本配置：

typescript

复制下载

import { createRouter, createWebHistory } from 'vue-router'
// 导入Vue Router的创建函数
// createWebHistory使用HTML5 History API，URL更美观

import type { RouteRecordRaw } from 'vue-router'
// 导入路由记录类型定义

// 定义路由数组，每个路由对应一个页面
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    // 根路径
    redirect: '/login'
    // 重定向到登录页面，作为默认首页
  },
  {
    path: '/login',
    // 登录页面路径
    name: 'Login',
    // 路由名称，用于编程式导航
    component: () => import('@/views/LoginView.vue')
    // 使用动态导入实现路由懒加载，提高首屏加载速度
  }
  // 可以在这里添加更多路由配置
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 使用history模式，需要服务器配置支持
  // import.meta.env.BASE_URL获取基础URL
  
  routes
  // 传入路由配置
})

// 导出路由实例，供main.ts使用
export default router

步骤4：配置Pinia Store

Pinia配置文件定义了应用的状态管理结构。

打开src/stores/index.ts，修改为：

typescript

复制下载

import { createPinia } from 'pinia'
// 导入createPinia函数，用于创建Pinia实例

// 创建Pinia实例
const pinia = createPinia()

// 导出Pinia实例，供main.ts使用
export default pinia

// 在这里可以导出具体的store模块
// 例如：export { useUserStore } from './user'
// 这样可以集中管理所有store的导出

第八章：创建Mock数据

步骤1：创建Mock目录和文件

Mock数据用于在开发阶段模拟后端API响应，实现前后端并行开发。

bash

复制下载

# 创建mock目录
mkdir mock

# 创建user mock文件
touch mock/user.ts

步骤2：配置Mock数据

编辑mock/user.ts文件：

typescript

复制下载

/*
 * @Description: Stay hungry，Stay foolish
 * @Author: Huccct
 * @Date: 2024-03-21
 */

// 模拟用户列表数据
const userList = [
  {
    id: 1,
    username: 'admin',
    password: '123456',
    name: '超级管理员',
    phone: '13800138000',
    roleName: '超级管理员',
    createTime: '2024-03-21',
    updateTime: '2024-03-21',
    status: 1,
  },
  {
    id: 2,
    username: 'test',
    password: '123456',
    name: '测试用户',
    phone: '13800138001',
    roleName: '普通管理员',
    createTime: '2024-03-21',
    updateTime: '2024-03-21',
    status: 1,
  },
]

export default [
  // 用户登录接口
  {
    url: '/api/user/login',
    method: 'post',
    response: ({ body }) => {
      const { username, password } = body
      const checkUser = userList.find(
        (item) => item.username === username && item.password === password,
      )
      if (!checkUser) {
        return { code: 201, data: { message: '账号或者密码不正确' } }
      }
      return { code: 200, data: {token:'Admin Token' }}
    },
  },
  // 获取用户信息
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      const token = request.headers.token
      if (token === 'Admin Token') {
        return {
          code: 200,
          data: {
            name: 'admin',
            avatar:
              'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            roles: ['admin'],
            buttons: ['cuser.detail'],
            routes: [
              'home',
              'Acl',
              'User',
              'Role',
              'Permission',
              'Product',
              'Trademark',
              'Attr',
              'Spu',
              'Sku',
            ],
          },
          message: '获取用户信息成功',
        }
      }
      return {
        code: 201,
        data: null,
        message: '获取用户信息失败',
      }
    },
  },
  // 获取用户列表
  {
    url: '/api/acl/user/:page/:limit',
    method: 'get',
    response: ({ query }) => {
      const { username } = query
      let filteredList = userList
      if (username) {
        filteredList = userList.filter((user) =>
          user.username.includes(username),
        )
      }
      return {
        code: 200,
        data: {
          records: filteredList,
          total: filteredList.length,
        },
      }
    },
  },
  // 添加/更新用户
  {
    url: '/api/acl/user/save',
    method: 'post',
    response: ({ body }) => {
      const newUser = {
        ...body,
        id: userList.length + 1,
        createTime: new Date().toISOString().split('T')[0],
        updateTime: new Date().toISOString().split('T')[0],
        status: 1,
      }
      userList.push(newUser)
      return { code: 200, data: null, message: '添加成功' }
    },
  },
  {
    url: '/api/acl/user/update',
    method: 'put',
    response: ({ body }) => {
      const index = userList.findIndex((item) => item.id === body.id)
      if (index !== -1) {
        userList[index] = {
          ...userList[index],
          ...body,
          updateTime: new Date().toISOString().split('T')[0],
        }
      }
      return { code: 200, data: null, message: '更新成功' }
    },
  },
  // 删除用户
  {
    url: '/api/acl/user/remove/:id',
    method: 'delete',
    response: (request) => {
      const id = request.query.id
      if (!id) {
        return { code: 201, data: null, message: '参数错误' }
      }
      const index = userList.findIndex((item) => item.id === Number(id))
      if (index !== -1) {
        userList.splice(index, 1)
        return { code: 200, data: null, message: '删除成功' }
      }
      return { code: 201, data: null, message: '用户不存在' }
    },
  },
  // 批量删除用户
  {
    url: '/api/acl/user/batchRemove',
    method: 'delete',
    response: ({ body }) => {
      const { idList } = body
      idList.forEach((id) => {
        const index = userList.findIndex((item) => item.id === id)
        if (index !== -1) {
          userList.splice(index, 1)
        }
      })
      return { code: 200, data: null, message: '批量删除成功' }
    },
  },
  // 获取用户角色
  {
    url: '/api/acl/user/toAssign/:userId',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: {
          assignRoles: [
            {
              id: 1,
              roleName: '超级管理员',
              createTime: '2024-03-21',
              updateTime: '2024-03-21',
            },
          ],
          allRolesList: [
            {
              id: 1,
              roleName: '超级管理员',
              createTime: '2024-03-21',
              updateTime: '2024-03-21',
            },
            {
              id: 2,
              roleName: '普通管理员',
              createTime: '2024-03-21',
              updateTime: '2024-03-21',
            },
          ],
        },
      }
    },
  },
  // 分配用户角色
  {
    url: '/api/acl/user/doAssignRole',
    method: 'post',
    response: () => {
      return { code: 200, data: null, message: '分配角色成功' }
    },
  },
  // 用户登出接口
  {
    url: '/api/user/logout',
    method: 'post',
    response: () => {
      return { code: 200, data: null, message: '退出成功' }
    },
  },
]

第九章：总结

至此，你已经完成了Guigu致选平台项目的初始化配置。通过这个一步一步的教程，你应该能够：

✅ 使用create-vue脚手架创建项目
✅ 按照项目文档配置所有依赖
✅ 设置TypeScript和Vite配置
✅ 配置Element Plus和图标
✅ 设置Mock数据服务
✅ 创建基础的项目结构
✅ 启动并验证项目运行

普通视图

第一章：项目创建 - 使用Create Vue的理由和步骤

步骤1：使用官方脚手架创建项目

第二章：修改Package.json - 详细配置解析

步骤1：更新scripts配置

步骤2：添加生产依赖

步骤3：添加开发依赖

步骤4：配置引擎要求和Prettier

第三章：创建环境检查脚本

步骤1：创建预安装脚本

第四章：配置HTML入口文件

步骤1：修改index.html

第五章：配置TypeScript和Vite

步骤1：修改tsconfig.json

步骤2：修改tsconfig.node.json

步骤3：配置Vite构建工具

第六章：配置代码质量和样式

步骤1：创建样式重置文件

步骤2：修改ESLint配置

步骤3：创建.prettierignore文件

第七章：配置项目核心文件

步骤1：修改main.ts文件

步骤2：修改App.vue文件

步骤3：配置路由

步骤4：配置Pinia Store

第八章：创建Mock数据

步骤1：创建Mock目录和文件

步骤2：配置Mock数据

第九章：总结