# vlightproject

**Repository Path**: ximu001/vlightproject

## Basic Information

- **Project Name**: vlightproject
- **Description**: 使用vue3+antd写的折叠树的页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-13
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Ant-Design

## README

# Vue 3 + TypeScript + Vite

# Project Name 
- **vlightproject**
# gitee地址：
  https://gitee.com/ximu001/vlightproject.git

**项目简介**：基于 Vue3+Antd的折叠树页面
   1.  树中节点可按层级展开/收起
   2.  节点可通过鼠标拖拽来移动位置，或与另一节点合并。 
   注意要点：
    1）. 节点不能跨级拖拽移动或合并（如将第三级节点拖至二级节点上）； 
    2）. 拖拽至同级节点上/下方或与节点重合时，需浮现出对应提示；

  拖至节点下方： 
   ![alt text](image-1.png)
  拖至与节点重合：
   ![alt text](image-2.png)


## 完成效果图：
![alt text](image-3.png)
## 技术栈

- **框架**: Vue 3 + TypeScript
- **路由**: Vue Router 4
- **UI 库**: Ant Design Vue
- **构建工具**: Vite 4
- **代码规范**: ESLint + Prettier
- **HTTP 客户端**: Axios（封装请求拦截、错误处理）
- **其他**: ESLint, Prettier，Mockjs

## 快速开始

### 环境要求

- Node.js >= 16.14.0
- npm >= 8.0.0

### 安装依赖

# 使用 cnpm
cnpm install

# 项目运行
npm run dev
浏览器访问：http://localhost:8081

代理配置（开发环境）
修改 vite.config.ts 中的 proxy 配置：
server: {
  port:8081
  proxy: {
    '/api': {
      target: 'http://your-api-server',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
# 项目结构 
- 根目录
  - src/    # 源代码目录
    - assets/          # 静态资源
    - components/      # 全局公共组件
    - mock/            # mockapi获取数据
    - router/          # 路由配置
    - styles/          # 全局样式
    - utils/           # 工具函数
    - views/           # 页面组件
    - App.vue          # 根组件
    - main.ts          # 入口文件
- 文档和配置文件
  - README.md
  - package.json
  - .gitignore