You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.3 KiB

项目vue-mgt-template - 个人项目代码记录系统,博客系统

项目概述

该项目作为我的个人代码记录总结实践系统整体是以一种后台管理系统的模式集成开发的项目框架依赖vue-pure-admin精简版该项目框架文档地址为https://pure-admin.cn/pages/introduction/#%E5%9C%A8%E7%BA%BF%E9%A2%84%E8%A7%88其中整个项目不包含后端代码接口为mock数据或本地文件数据等

技术栈规范

  • 语言: Vue3setup语法模式TypeScript
  • UI库: element plus
  • css组件: tailwindcssscss

项目文档

文档地址为: /README.md

项目结构

vue3-mgt-template/
├───.env                # 环境变量文件
├───index.html          # 应用入口HTML文件
├───package.json        # 定义项目依赖和脚本
├───vite.config.ts      # Vite 构建配置文件
├───tailwind.config.ts  # Tailwind CSS 配置文件
├───tsconfig.json       # TypeScript 编译器配置
├───mock/               # 本地Mock数据接口
├───public/             # 公共静态资源目录
├───src/                # 主要源代码目录
│   ├───App.vue         # 根 Vue 组件
│   ├───main.ts         # 应用入口初始化Vue实例
│   ├───api/            # API 请求模块
│   ├───assets/         # 静态资源(图片、字体、样式)
│   ├───components/     # 可复用的全局组件
│   ├───directives/     # Vue 自定义指令
│   ├───hooks/          # 可复用的 Composition API (Hooks)
│   ├───layout/         # 后台管理系统整体布局组件
│   ├───plugins/        # 插件(如 ECharts, Element Plus
│   ├───router/         # Vue Router 路由配置
│   ├───store/          # Pinia 全局状态管理
│   ├───style/          # 全局样式和 SCSS 变量
│   ├───utils/          # 工具函数模块
│   └───views/          # 页面级组件
└───types/              # 全局 TypeScript 类型定义

开发规范

对Gemini的特别指令

  • 严格遵守规范当Gemini为本项目生成或修改任何代码时必须 严格遵守本文件中定义的所有开发规范。
  • 中文优先:所有代码注释、日志输出(例如 console.log、以及提交信息Commit Message必须 使用中文。

代码风格

  • 使用 TypeScript 严格模式
  • 组件命名采用 PascalCase (如 TaskCard.vue)
  • 函数和变量使用 camelCase驼峰命名
  • 常量使用 UPPER_SNAKE_CASE

项目启动

  • 请参考package.json中dev命令可以直接启动项目

注释和日志

  • 注释请使用中文
  • 日志输出请使用中文

对话记录

本次会话总结 (2025年10月14日)

本次会话主要围绕 首页动态化改造 展开,完成了以下核心功能:

  1. 创建页面统计脚本:

    • scripts/ 目录下创建了 statistics.mjs 脚本。
    • 该脚本能够统计 demo, python, utils, screen, template 等多个模块下的页面数量、标题、最后修改日期等信息。
    • 脚本能够智能处理动态路由(如 demo 模块)和静态路由(如 template 模块)两种不同定义方式。
    • package.json 中添加了 pnpm run stats 命令来执行此脚本。
  2. 生成动态配置文件:

    • 脚本的统计结果会输出到 /src/views/welcome/config.json 文件中,作为首页的数据源。
  3. 首页组件改造:

    • 重构了 /src/views/welcome/index.vue 组件。
    • 移除了原有的静态模拟数据。
    • 组件现在直接从 config.json 导入数据,实现了首页内容的动态更新。
    • 在页面前端添加了分类的中文名映射,优化了展示效果。
  4. 过程中的迭代与修复:

    • 根据用户反馈,修复了统计脚本中错误的过滤逻辑,确保了统计数据的准确性。
    • 根据用户需求,多次优化了页面标题的生成规则。
    • 根据用户反馈为所有由Gemini生成的代码和日志添加了中文注释并强化了此项规范。
  • gemini在与我每次对话中需要将重要信息更新到GEMINI.md文件中方便下次重新运行时gemini理解

开发任务

规范

使用了删除线的就代表已执行完成

任务列表

  • 项目首页/welcome这个路由下是默认的的首页介绍页面但是现在这个页面是一个静态的页面是由一些模拟数据渲染的我现在希望完成功能如下
  • 在package.json中添加一个命令当执行这个命令的时候可以本地统计/src/views下的/demo/python/utils/screen这四个模块下分别有多少个页面页面维度请按照router路由来统计例如/python文件夹有五个文件夹这就是5个页面。当统计完成后在/src/views/welcome中创建或者更新config.json文件以便后续页面可以直接读取json配置文件

  • 请读取/src/view/welcome中页面其中页面的数据来源为/scripts/statistics.mjs请更新该脚本以便获得更多的信息来满足/src/view/welcome页面所需数据的渲染

  • 将/src/view/welcome/config.json作为数据源渲染到/src/view/welcome的vue组件中