215 lines
5.1 KiB
Markdown
215 lines
5.1 KiB
Markdown
|
# CMS内容管理系统 - 前端项目
|
|||
|
|
|
|||
|
|
## 项目简介
|
|||
|
|
|
|||
|
|
这是一个基于Vue 3 + TailwindCSS开发的现代化CMS内容管理系统前端项目，包含完整的前台展示和后台管理功能。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **前端框架**: Vue 3 + Composition API
|
|||
|
|
- **构建工具**: Vite
|
|||
|
|
- **样式框架**: TailwindCSS
|
|||
|
|
- **路由管理**: Vue Router
|
|||
|
|
- **状态管理**: Pinia
|
|||
|
|
- **开发语言**: JavaScript/TypeScript
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 🏠 前台功能
|
|||
|
|
- **响应式首页** - 英雄区域、特性介绍、最新内容展示
|
|||
|
|
- **技术文章** - 文章列表、搜索筛选、详情页面
|
|||
|
|
- **新闻资讯** - 新闻展示、分类浏览、热门推荐
|
|||
|
|
- **关于我们** - 公司介绍、团队展示
|
|||
|
|
- **联系我们** - 联系信息、在线表单
|
|||
|
|
|
|||
|
|
### 🔧 后台管理
|
|||
|
|
- **仪表盘** - 数据统计、快速操作
|
|||
|
|
- **内容管理** - 文章/新闻的增删改查
|
|||
|
|
- **用户管理** - 用户信息、权限控制
|
|||
|
|
- **系统设置** - 基本配置、安全设置
|
|||
|
|
|
|||
|
|
### 📱 移动端适配
|
|||
|
|
- **响应式设计** - 完美适配各种设备
|
|||
|
|
- **触摸优化** - 移动端友好的交互体验
|
|||
|
|
- **折叠菜单** - 移动端导航优化
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
cms-view-new/
|
|||
|
|
├── public/ # 静态资源
|
|||
|
|
├── src/
|
|||
|
|
│ ├── components/ # 公共组件
|
|||
|
|
│ ├── layouts/ # 布局组件
|
|||
|
|
│ │ ├── Header.vue # 前台布局
|
|||
|
|
│ │ └── AdminLayout.vue # 后台布局
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ │ ├── index/ # 首页
|
|||
|
|
│ │ ├── articles/ # 文章页面
|
|||
|
|
│ │ ├── news/ # 新闻页面
|
|||
|
|
│ │ ├── about/ # 关于页面
|
|||
|
|
│ │ ├── contact/ # 联系页面
|
|||
|
|
│ │ ├── auth/ # 认证页面
|
|||
|
|
│ │ └── admin/ # 管理后台
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ ├── stores/ # 状态管理
|
|||
|
|
│ └── style.css # 全局样式
|
|||
|
|
├── package.json
|
|||
|
|
└── vite.config.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 安装和运行
|
|||
|
|
|
|||
|
|
### 环境要求
|
|||
|
|
- Node.js >= 16.0.0
|
|||
|
|
- npm >= 8.0.0
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
```bash
|
|||
|
|
cd cms-view-new
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 开发模式
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
访问: http://localhost:8890
|
|||
|
|
|
|||
|
|
### 生产构建
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 预览构建结果
|
|||
|
|
```bash
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 页面路由
|
|||
|
|
|
|||
|
|
### 前台路由
|
|||
|
|
- `/` - 首页
|
|||
|
|
- `/articles` - 技术文章列表
|
|||
|
|
- `/articles/:id` - 文章详情
|
|||
|
|
- `/news` - 新闻资讯列表
|
|||
|
|
- `/news/:id` - 新闻详情
|
|||
|
|
- `/about` - 关于我们
|
|||
|
|
- `/contact` - 联系我们
|
|||
|
|
|
|||
|
|
### 后台路由
|
|||
|
|
- `/login` - 登录页面
|
|||
|
|
- `/admin` - 管理后台首页
|
|||
|
|
- `/admin/dashboard` - 仪表盘
|
|||
|
|
- `/admin/articles` - 文章管理
|
|||
|
|
- `/admin/news` - 新闻管理
|
|||
|
|
- `/admin/users` - 用户管理
|
|||
|
|
- `/admin/settings` - 系统设置
|
|||
|
|
|
|||
|
|
## 设计特色
|
|||
|
|
|
|||
|
|
### 🎨 视觉设计
|
|||
|
|
- **现代化界面** - 简洁美观的设计风格
|
|||
|
|
- **深蓝色主题** - 专业的配色方案
|
|||
|
|
- **渐变效果** - 丰富的视觉层次
|
|||
|
|
- **卡片布局** - 清晰的信息组织
|
|||
|
|
|
|||
|
|
### 🔄 交互体验
|
|||
|
|
- **流畅动画** - 页面切换和悬停效果
|
|||
|
|
- **响应式反馈** - 即时的用户操作反馈
|
|||
|
|
- **加载状态** - 友好的加载提示
|
|||
|
|
- **错误处理** - 完善的错误提示机制
|
|||
|
|
|
|||
|
|
### 📱 移动端优化
|
|||
|
|
- **触摸友好** - 适合手指操作的按钮大小
|
|||
|
|
- **滑动菜单** - 移动端专用的导航方式
|
|||
|
|
- **自适应布局** - 内容自动适配屏幕尺寸
|
|||
|
|
- **性能优化** - 移动端加载速度优化
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
### 组件开发
|
|||
|
|
- 使用Vue 3 Composition API
|
|||
|
|
- 遵循单一职责原则
|
|||
|
|
- 保持组件的可复用性
|
|||
|
|
|
|||
|
|
### 样式开发
|
|||
|
|
- 使用TailwindCSS工具类
|
|||
|
|
- 保持响应式设计
|
|||
|
|
- 遵循设计系统规范
|
|||
|
|
|
|||
|
|
### 路由管理
|
|||
|
|
- 使用Vue Router 4
|
|||
|
|
- 实现路由守卫
|
|||
|
|
- 支持动态路由
|
|||
|
|
|
|||
|
|
## 部署说明
|
|||
|
|
|
|||
|
|
### 静态部署
|
|||
|
|
构建后的`dist`目录可以部署到任何静态文件服务器：
|
|||
|
|
- Nginx
|
|||
|
|
- Apache
|
|||
|
|
- Vercel
|
|||
|
|
- Netlify
|
|||
|
|
|
|||
|
|
### 服务器配置
|
|||
|
|
需要配置单页应用的路由重写规则，将所有路由指向`index.html`。
|
|||
|
|
|
|||
|
|
## 浏览器支持
|
|||
|
|
|
|||
|
|
- Chrome >= 87
|
|||
|
|
- Firefox >= 78
|
|||
|
|
- Safari >= 14
|
|||
|
|
- Edge >= 88
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
MIT License
|
|||
|
|
|
|||
|
|
## 联系方式
|
|||
|
|
|
|||
|
|
如有问题或建议，请联系开发团队。
|
|||
|
|
|
|||
|
|
## API接口说明
|
|||
|
|
|
|||
|
|
### 基础配置
|
|||
|
|
```javascript
|
|||
|
|
// src/api/index.js
|
|||
|
|
const API_BASE_URL = 'http://localhost:3000/api'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 主要接口
|
|||
|
|
- `GET /articles` - 获取文章列表
|
|||
|
|
- `GET /articles/:id` - 获取文章详情
|
|||
|
|
- `POST /articles` - 创建文章
|
|||
|
|
- `PUT /articles/:id` - 更新文章
|
|||
|
|
- `DELETE /articles/:id` - 删除文章
|
|||
|
|
- `GET /news` - 获取新闻列表
|
|||
|
|
- `GET /categories` - 获取分类列表
|
|||
|
|
- `POST /auth/login` - 用户登录
|
|||
|
|
- `GET /auth/profile` - 获取用户信息
|
|||
|
|
|
|||
|
|
### 空状态处理
|
|||
|
|
当列表数据为空时，系统会显示EmptyState组件：
|
|||
|
|
```vue
|
|||
|
|
<EmptyState
|
|||
|
|
title="暂时没有数据"
|
|||
|
|
description="敬请期待更多精彩内容"
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
### v1.0.0 (2024-01-16)
|
|||
|
|
- ✅ 完成前台所有页面开发
|
|||
|
|
- ✅ 完成管理后台功能
|
|||
|
|
- ✅ 集成cms-api接口
|
|||
|
|
- ✅ 添加空状态组件
|
|||
|
|
- ✅ 修复所有语法错误
|
|||
|
|
- ✅ 完成移动端适配
|
|||
|
|
- ✅ 优化图片资源加载
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
© 2024 CMS内容管理系统. 保留所有权利.
|