校园新闻管理系统
这是一个基于 Vue 3 + TypeScript + Vite 构建的现代化校园新闻管理系统前端项目。该系统提供了新闻管理、用户中心、AI 对话、学习计划等功能模块。
技术栈
- 框架: Vue 3.5.22
- 构建工具: Vite 5.0.0
- 语言: TypeScript 4.5.5
- UI 组件库: Element Plus 2.11.4
- 状态管理: Vuex 4.1.0
- 路由管理: Vue Router 4.5.1
- HTTP 客户端: Axios 1.7.9
- PWA 支持: vite-plugin-pwa
功能模块
首页模块
- 横幅管理
- 菜单导航
- 新闻展示
- 推荐内容
- 搜索功能
- 统计数据
系统管理模块
- 用户管理
- 角色管理
- 权限管理
- 部门管理
- 菜单管理
- 文件管理
学习模块
- 课程管理
- 学习计划
- 学习任务
- 学习记录
用户中心模块
- 个人资料
- 浏览记录
- 收藏管理
- 成就系统
- 积分系统
AI 助手模块
- 智能对话
- 知识库管理
- 消息管理
- 文件上传
- Agent 配置
项目结构
schoolNewsWeb/
├── src/
│ ├── apis/ # API 接口定义
│ │ ├── ai/ # AI 相关接口
│ │ ├── homepage/ # 首页相关接口
│ │ ├── study/ # 学习模块接口
│ │ ├── system/ # 系统管理接口
│ │ └── usercenter/ # 用户中心接口
│ ├── components/ # 公共组件
│ ├── directives/ # 自定义指令
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ └── views/ # 页面组件
├── public/ # 静态资源
└── dist/ # 构建输出目录
环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0 或 yarn >= 1.22.0
如何运行
1. 安装依赖
npm install
或者使用 yarn：
yarn install
2. 启动开发服务器
npm run dev
或者：
npm run serve
开发服务器将在 http://localhost:8080 启动，并自动打开浏览器。
3. 后端API配置
项目默认将 /api 路径代理到 http://127.0.0.1:8081/schoolNewsServ。
如需修改后端地址，请编辑 vite.config.js 文件中的 proxy 配置：
proxy: {
'/api': {
target: 'http://your-backend-url',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
如何构建
构建生产版本
npm run build
构建产物将输出到 dist/ 目录。
预览构建结果
npm run preview
代码规范
运行代码检查
npm run lint
项目使用 ESLint 进行代码检查，配置了 TypeScript 和 Vue 相关的规则。
功能特性
PWA 支持
项目已配置 PWA 支持，可以作为渐进式 Web 应用安装到设备上。
权限系统
- 基于角色的权限控制（RBAC）
- 自定义指令进行权限校验
- 动态路由生成
响应式设计
- 适配桌面端和移动端
- 现代化的 UI 设计
- 优秀的用户体验
开发说明
路径别名
项目配置了 @ 作为 src 目录的别名，可以这样导入模块：
import { someFunction } from '@/utils/helper'
import MyComponent from '@/components/MyComponent.vue'
环境变量
项目定义了以下环境变量：
process.env.BASE_URL:/schoolNewsWeb/process.env.VITE_API_BASE_URL:/apiprocess.env.VITE_APP_TITLE:校园新闻管理系统
浏览器支持
支持所有现代浏览器的最新两个版本：
- Chrome
- Firefox
- Safari
- Edge
许可证
私有项目
联系方式
如有问题或建议，请联系项目维护团队。