# fourseans-admin-Vue3

**Repository Path**: mos-tabs/fourseans-admin-Vue3

## Basic Information

- **Project Name**: fourseans-admin-Vue3
- **Description**: 这是fourseans的后端管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-08
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 贵州四季康养智慧文旅综合服务平台 - Web管理后台

<div align="center">

![Vue 3](https://img.shields.io/badge/Vue-3.5.25-brightgreen.svg)
![Element Plus](https://img.shields.io/badge/Element%20Plus-2.11.9-blue.svg)
![Vite](https://img.shields.io/badge/Vite-7.2.4-purple.svg)
![License](https://img.shields.io/badge/License-MIT-yellow.svg)

**基于 Vue 3 + Element Plus 的现代化管理后台系统**

[功能特性](#功能特性) • [技术栈](#技术栈) • [快速开始](#快速开始) • [项目结构](#项目结构) • [开发指南](#开发指南)

</div>

---

## 📖 项目简介

贵州四季康养智慧文旅综合服务平台的Web管理后台，为平台管理员和商家提供数据管理、内容管理、订单管理、用户管理等功能。采用Vue 3 + Vite + Element Plus技术栈，提供现代化、响应式的管理界面。

### 🎯 项目定位

- **平台管理**：为平台管理员提供全面的数据管理和运营工具
- **商家管理**：为商家提供店铺、商品、订单管理功能
- **数据分析**：提供可视化的数据统计和分析报表
- **内容管理**：管理轮播图、公告、活动等平台内容

---

## ✨ 功能特性

### 核心功能模块

#### 📊 数据统计
- 实时数据概览
- 销售趋势分析
- 用户增长统计
- 热门商品排行
- 订单数据分析

#### 👥 用户管理
- 用户列表查询
- 用户信息编辑
- 用户状态管理
- 用户权限设置
- 用户行为分析

#### 🛍️ 商品管理
- 商品分类管理
- 商品列表管理
- 商品信息编辑
- 商品上下架
- 库存管理
- 商品审核

#### 📦 订单管理
- 订单列表查询
- 订单详情查看
- 订单状态更新
- 发货管理
- 退款处理
- 订单统计

#### 🎨 内容管理
- 轮播图管理
- 公告管理
- 活动管理
- 景点管理
- 路线管理
- 游记审核

#### 🎁 营销管理
- 优惠券管理
- 会员管理
- 积分管理
- 营销活动

#### ⚙️ 系统管理
- 管理员管理
- 角色权限管理
- 系统配置
- 操作日志

---

## 🛠️ 技术栈

### 核心框架
- **Vue 3.5.25** - 渐进式JavaScript框架
- **Vite 7.2.4** - 下一代前端构建工具
- **Vue Router 4.6.3** - 官方路由管理器
- **Pinia 3.0.4** - Vue 3状态管理库

### UI组件库
- **Element Plus 2.11.9** - 基于Vue 3的组件库
- **@element-plus/icons-vue 2.3.2** - Element Plus图标库

### 工具库
- **Axios 1.13.2** - HTTP客户端
- **Day.js 1.11.19** - 日期处理库
- **NProgress 0.2.0** - 页面加载进度条
- **@vueuse/core 14.1.0** - Vue组合式API工具集

### 开发工具
- **Sass 1.94.2** - CSS预处理器
- **unplugin-auto-import** - 自动导入API
- **unplugin-vue-components** - 自动导入组件
- **vite-plugin-vue-devtools** - Vue开发者工具

---

## 🚀 快速开始

### 环境要求

- **Node.js 20.19.0+** 或 **22.12.0+**
- **pnpm 8.0+**（推荐）或 npm/yarn

### 安装步骤

#### 1. 克隆项目

```bash
git clone https://gitee.com/mos-tabs/fourseans-admin-Vue3.git
cd fourseans-admin-Vue3
```

#### 2. 安装依赖

```bash
# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install
```

#### 3. 配置环境变量

创建 `.env.development` 文件：

```env
# 开发环境配置
VITE_APP_TITLE=四季康养管理后台
VITE_APP_BASE_API=http://localhost:8080/api
VITE_APP_UPLOAD_URL=http://localhost:8080/api/upload
```

创建 `.env.production` 文件：

```env
# 生产环境配置
VITE_APP_TITLE=四季康养管理后台
VITE_APP_BASE_API=https://api.yourdomai.com/api
VITE_APP_UPLOAD_URL=https://api.yourdomain.com/api/upload
```

#### 4. 启动开发服务器

```bash
pnpm dev
```

访问：http://localhost:5173

#### 5. 构建生产版本

```bash
pnpm build
```

#### 6. 预览生产构建

```bash
pnpm preview
```


---

## 📁 项目结构

```
fourseasons-health-vue3/
├── public/                          # 静态资源
│   ├── favicon.ico
│   └── logo.svg
├── src/
│   ├── api/                         # API接口
│   │   ├── activity.js              # 活动接口
│   │   ├── auth.js                  # 认证接口
│   │   ├── banner.js                # 轮播图接口
│   │   ├── coupon.js                # 优惠券接口
│   │   ├── dashboard.js             # 数据统计接口
│   │   ├── diary.js                 # 游记接口
│   │   ├── member.js                # 会员接口
│   │   ├── order.js                 # 订单接口
│   │   ├── product.js               # 商品接口
│   │   ├── route.js                 # 路线接口
│   │   ├── spot.js                  # 景点接口
│   │   ├── system.js                # 系统接口
│   │   └── wellness.js              # 康养接口
│   ├── layouts/                     # 布局组件
│   │   └── AdminLayout.vue          # 管理后台布局
│   ├── router/                      # 路由配置
│   │   └── index.js                 # 路由定义
│   ├── stores/                      # 状态管理
│   │   ├── app.js                   # 应用状态
│   │   ├── user.js                  # 用户状态
│   │   └── counter.js               # 计数器示例
│   ├── styles/                      # 样式文件
│   │   └── index.scss               # 全局样式
│   ├── utils/                       # 工具函数
│   │   └── request.js               # Axios封装
│   ├── views/                       # 页面视图
│   │   ├── content/                 # 内容管理
│   │   │   ├── banner/              # 轮播图管理
│   │   │   ├── activity/            # 活动管理
│   │   │   ├── spot/                # 景点管理
│   │   │   ├── route/               # 路线管理
│   │   │   └── diary/               # 游记管理
│   │   ├── dashboard/               # 数据统计
│   │   │   └── index.vue            # 统计首页
│   │   ├── error/                   # 错误页面
│   │   │   ├── 403.vue
│   │   │   └── 404.vue
│   │   ├── login/                   # 登录页面
│   │   │   └── index.vue
│   │   ├── marketing/               # 营销管理
│   │   │   ├── coupon/              # 优惠券管理
│   │   │   └── member/              # 会员管理
│   │   ├── order/                   # 订单管理
│   │   │   ├── list.vue             # 订单列表
│   │   │   └── detail.vue           # 订单详情
│   │   ├── product/                 # 商品管理
│   │   │   ├── category/            # 分类管理
│   │   │   ├── list.vue             # 商品列表
│   │   │   └── edit.vue             # 商品编辑
│   │   ├── system/                  # 系统管理
│   │   │   ├── admin/               # 管理员管理
│   │   │   ├── role/                # 角色管理
│   │   │   └── config/              # 系统配置
│   │   └── user/                    # 用户管理
│   │       ├── list.vue             # 用户列表
│   │       └── detail.vue           # 用户详情
│   ├── App.vue                      # 根组件
│   ├── main.js                      # 入口文件
│   ├── auto-imports.d.ts            # 自动导入类型声明
│   └── components.d.ts              # 组件类型声明
├── .env.development                 # 开发环境变量
├── .env.production                  # 生产环境变量
├── .gitignore                       # Git忽略文件
├── index.html                       # HTML模板
├── jsconfig.json                    # JS配置
├── package.json                     # 项目依赖
├── pnpm-lock.yaml                   # pnpm锁文件
├── vite.config.js                   # Vite配置
└── README.md                        # 项目说明
```

---

## 🔧 配置说明

### Vite配置

`vite.config.js` 主要配置：

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入Vue API
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver()],
    }),
    // 自动导入组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
})
```

### 路由配置

`src/router/index.js` 示例：

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import AdminLayout from '@/layouts/AdminLayout.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/',
    component: AdminLayout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: { title: '数据统计', icon: 'DataAnalysis' }
      },
      {
        path: 'users',
        name: 'Users',
        component: () => import('@/views/user/list.vue'),
        meta: { title: '用户管理', icon: 'User' }
      },
      // 更多路由...
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

### Axios配置

`src/utils/request.js` 示例：

```javascript
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 10000
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers['Authorization'] = `Bearer ${userStore.token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      ElMessage.error(res.message || '请求失败')
      return Promise.reject(new Error(res.message || '请求失败'))
    }
    return res.data
  },
  error => {
    ElMessage.error(error.message || '网络错误')
    return Promise.reject(error)
  }
)

export default request
```

---

## 🎨 开发指南

### 推荐IDE设置

- **VS Code** + **Vue (Official)** 插件
- 禁用 Vetur 插件（与 Vue 3 不兼容）

### 推荐浏览器插件

- **Chrome/Edge**: [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- **Firefox**: [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)

### 代码规范

#### 组件命名
```vue
<!-- 使用 PascalCase -->
<template>
  <UserList />
  <ProductCard />
</template>
```

#### API调用
```javascript
// 在 setup 中使用
import { ref } from 'vue'
import { getUserList } from '@/api/user'

const userList = ref([])

const fetchUsers = async () => {
  try {
    userList.value = await getUserList()
  } catch (error) {
    console.error(error)
  }
}
```

#### 状态管理
```javascript
// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  actions: {
    setToken(token) {
      this.token = token
    },
    setUserInfo(info) {
      this.userInfo = info
    }
  }
})
```

### 新增页面步骤

1. **创建页面组件**
```bash
# 在 src/views 下创建页面
src/views/example/index.vue
```

2. **添加路由配置**
```javascript
// src/router/index.js
{
  path: 'example',
  name: 'Example',
  component: () => import('@/views/example/index.vue'),
  meta: { title: '示例页面', icon: 'Document' }
}
```

3. **创建API接口**
```javascript
// src/api/example.js
import request from '@/utils/request'

export function getExampleList(params) {
  return request({
    url: '/example/list',
    method: 'get',
    params
  })
}
```



---

## 🚢 部署指南

### 构建生产版本

```bash
# 构建
pnpm build

# 构建产物在 dist 目录
```

### Nginx部署

#### 1. 配置Nginx

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    root /var/www/fourseasons-admin;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

#### 2. 上传文件

```bash
# 上传dist目录到服务器
scp -r dist/* user@server:/var/www/fourseasons-admin/
```

#### 3. 重启Nginx

```bash
sudo nginx -t
sudo systemctl reload nginx
```

### Docker部署

#### 1. 创建Dockerfile

```dockerfile
# 构建阶段
FROM node:20-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

#### 2. 构建镜像

```bash
docker build -t fourseasons-admin:1.0.0 .
```

#### 3. 运行容器

```bash
docker run -d \
  --name fourseasons-admin \
  -p 80:80 \
  fourseasons-admin:1.0.0
```

### CDN部署

将构建产物上传到CDN，配置静态资源加速。

---

## 🔐 权限控制

### 路由权限

```javascript
// router/index.js
router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
  
  if (to.path === '/login') {
    next()
  } else {
    if (userStore.token) {
      next()
    } else {
      next('/login')
    }
  }
})
```

### 按钮权限

```vue
<template>
  <!-- 使用自定义指令 -->
  <el-button v-permission="['admin']">删除</el-button>
  
  <!-- 或使用函数判断 -->
  <el-button v-if="hasPermission('admin')">删除</el-button>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const hasPermission = (permission) => {
  return userStore.permissions.includes(permission)
}
</script>
```

---

## 📊 性能优化

### 路由懒加载

```javascript
// 使用动态导入
const routes = [
  {
    path: '/users',
    component: () => import('@/views/user/list.vue')
  }
]
```

### 组件懒加载

```vue
<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('@/components/HeavyComponent.vue')
)
</script>
```

### 图片懒加载

```vue
<template>
  <el-image 
    :src="imageUrl" 
    lazy
    :scroll-container="scrollContainer"
  />
</template>
```

### 打包优化

```javascript
// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus'],
          'vue-vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    },
    chunkSizeWarningLimit: 1000
  }
})
```

---

## 🐛 常见问题

### Q1: 启动时报端口被占用
**A:** 修改 `vite.config.js` 中的端口号，或关闭占用端口的进程

```javascript
server: {
  port: 5174  // 修改为其他端口
}
```

### Q2: API请求跨域问题
**A:** 配置Vite代理或后端开启CORS

```javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}
```

### Q3: 打包后路由404
**A:** 配置服务器支持HTML5 History模式

```nginx
location / {
  try_files $uri $uri/ /index.html;
}
```

### Q4: Element Plus样式不生效
**A:** 确保正确导入样式

```javascript
// main.js
import 'element-plus/dist/index.css'
```

### Q5: 自动导入不生效
**A:** 重启开发服务器，或检查 `auto-imports.d.ts` 文件

---

## 📝 开发规范

### Git提交规范

```bash
feat: 新增功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关
```

### 组件开发规范

```vue
<template>
  <!-- 模板内容 -->
</template>

<script setup>
// 1. 导入依赖
import { ref, computed, onMounted } from 'vue'

// 2. 定义props
const props = defineProps({
  title: String
})

// 3. 定义emits
const emit = defineEmits(['update'])

// 4. 响应式数据
const count = ref(0)

// 5. 计算属性
const doubleCount = computed(() => count.value * 2)

// 6. 方法
const increment = () => {
  count.value++
  emit('update', count.value)
}

// 7. 生命周期
onMounted(() => {
  console.log('组件已挂载')
})
</script>

<style scoped>
/* 组件样式 */
</style>
```

### 文件命名规范

- **组件文件**: PascalCase (UserList.vue)
- **工具文件**: camelCase (request.js)
- **样式文件**: kebab-case (user-list.scss)

---

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

---

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

---

## 📞 联系方式

- **项目负责人**：【你的姓名】
- **邮箱**：【你的邮箱】
- **项目地址**：https://gitee.com/mos-tabs/fourseans-admin-Vue3

---

## 🙏 致谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Element Plus](https://element-plus.org/)
- [Pinia](https://pinia.vuejs.org/)
- [Vue Router](https://router.vuejs.org/)

---

## 📚 相关项目

- **微信小程序前端**：[fourseasons-health](https://gitee.com/mos-tabs/fourseasons-health) (分支: newfile/0.1.1)
- **后端服务**：[fourseans-admin-springboot](https://gitee.com/mos-tabs/fourseans-admin-springboot)

---

## 📅 更新日志

### v1.0.0 (2025-12-31)
- ✨ 初始版本发布
- ✅ 完成数据统计模块
- ✅ 完成用户管理模块
- ✅ 完成商品管理模块
- ✅ 完成订单管理模块
- ✅ 完成内容管理模块
- ✅ 完成营销管理模块
- ✅ 完成系统管理模块
- ✅ 集成Element Plus UI
- ✅ 集成Vue Router路由
- ✅ 集成Pinia状态管理

---

<div align="center">

**⭐ 如果这个项目对你有帮助，请给一个 Star！⭐**

Made with ❤️ by FourSeasons Team

</div>