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

安装依赖

cd cms-view-new
npm install

开发模式

npm run dev

访问: http://localhost:8890

生产构建

npm run build

预览构建结果

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接口说明

基础配置

// 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组件：

<EmptyState 
  title="暂时没有数据" 
  description="敬请期待更多精彩内容" 
/>

更新日志

v1.0.0 (2024-01-16)

• ✅ 完成前台所有页面开发
• ✅ 完成管理后台功能
• ✅ 集成cms-api接口
• ✅ 添加空状态组件
• ✅ 修复所有语法错误
• ✅ 完成移动端适配
• ✅ 优化图片资源加载

---

© 2024 CMS内容管理系统. 保留所有权利.