第一章：项目创建 - 使用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数据服务
- ✅ 创建基础的项目结构
- ✅ 启动并验证项目运行
登录