lq/nl_cms-view

Fork 0

Files

liqi 4b2d0a6e94 前端样式第一版已完成

2025-07-29 12:43:09 +08:00

5.1 KiB

Raw Blame History

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接口
✅ 添加空状态组件
✅ 修复所有语法错误
✅ 完成移动端适配
✅ 优化图片资源加载

5.1 KiB Raw Blame History Unescape Escape