Vue3 企业级后台管理系统

# 克隆项目
git clone https://github.com/buqiyuan/vue3-antdv-admin

# 进入项目目录
cd vue3-antdv-admin

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 构建生产版本
yarn build

# 预览构建结果
yarn preview

# 部署到 COS (自动版本管理)
yarn deploy

# 指定版本类型部署
yarn deploy:major    # 主版本号 +1
yarn deploy:minor    # 次版本号 +1  
yarn deploy:patch    # 修订版本号 +1

# 清理指定版本
yarn deploy:clean

# 查看当前版本
yarn deploy:version

src/
├── api/                    # API 接口定义
│   ├── backend/           # 后端 API (自动生成)
│   └── demo/              # 演示 API
├── assets/                # 静态资源
├── components/            # 组件库
│   ├── basic/            # 基础组件
│   ├── business/         # 业务组件  
│   └── core/             # 核心组件 (动态表格/表单)
├── hooks/                 # 组合式函数
├── layout/               # 布局组件
├── locales/              # 国际化配置
├── router/               # 路由配置
├── store/                # 状态管理
├── styles/               # 全局样式
├── utils/                # 工具函数
└── views/                # 页面组件
    ├── dashboard/        # 仪表盘
    ├── system/           # 系统管理
    └── ...

views/
└── 业务模块名/
    └── 页面名称/
        ├── index.vue          # 页面主文件
        ├── components/        # 页面专用组件
        │   ├── EditModal.vue
        │   └── DetailDrawer.vue
        └── hooks/            # 页面专用逻辑
            └── useTableData.ts

<template>
  <div class="page-container">
    <div class="page-header">
      <h1>{{ title }}</h1>
    </div>
    <div class="page-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'

export default defineComponent({
  name: 'PageName',
  setup() {
    // 响应式数据
    const state = reactive({
      title: '页面标题',
      loading: false,
      dataSource: [],
    })

    // 业务方法
    const methods = {
      /**
       * 初始化页面数据
       */
      async initData() {
        state.loading = true
        try {
          // 数据加载逻辑
        }
        finally {
          state.loading = false
        }
      },

      /**
       * 处理用户操作
       */
      handleAction() {
        // 操作逻辑
      },
    }

    // 生命周期
    onMounted(() => {
      methods.initData()
    })

    return {
      ...toRefs(state),
      ...methods,
    }
  },
})
</script>

<style lang="less" scoped>
.page-container {
  @apply p-4;
}

.page-header {
  @apply mb-4 pb-4 border-b border-gray-200;
}

.page-content {
  @apply bg-white rounded-lg p-4;
}
</style>

components/basic/组件名/
├── index.vue              # 组件主文件
├── types.ts              # 类型定义
├── hooks/                # 组件专用逻辑
│   └── useComponentLogic.ts
└── __tests__/            # 单元测试
    └── index.test.ts

// api/demo/user.ts
import { request } from '@/utils/request'

export interface UserInfo {
  id: number
  name: string
  email: string
}

export interface UserListParams {
  page: number
  pageSize: number
  keyword?: string
}

/**
 * 获取用户列表
 */
export function getUserList(params: UserListParams) {
  return request<UserInfo[]>({
    url: '/api/users',
    method: 'GET',
    params,
  })
}

/**
 * 创建用户
 */
export function createUser(data: Omit<UserInfo, 'id'>) {
  return request<UserInfo>({
    url: '/api/users',
    method: 'POST',
    data,
  })
}

// 在组件中使用
import { message } from 'ant-design-vue'
import { createUser, getUserList } from '@/api/demo/user'

const methods = {
  /**
   * 加载用户数据
   */
  async loadUsers() {
    try {
      state.loading = true
      const response = await getUserList({
        page: state.pagination.current,
        pageSize: state.pagination.pageSize,
        keyword: state.searchKeyword,
      })
      state.dataSource = response.data
      state.pagination.total = response.total
    }
    catch (error) {
      message.error('加载用户数据失败')
      console.error('Load users error:', error)
    }
    finally {
      state.loading = false
    }
  },

  /**
   * 创建用户
   */
  async handleCreateUser(userData: Omit<UserInfo, 'id'>) {
    try {
      await createUser(userData)
      message.success('用户创建成功')
      // 刷新列表
      await methods.loadUsers()
    }
    catch (error) {
      message.error('用户创建失败')
      throw error // 让调用方处理错误
    }
  },
}

// store/modules/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null as UserInfo | null,
    permissions: [] as string[],
    token: '',
  }),

  getters: {
    isLoggedIn: state => !!state.token,
    hasPermission: state => (permission: string) =>
      state.permissions.includes(permission),
  },

  actions: {
    /**
     * 用户登录
     */
    async login(credentials: LoginParams) {
      const response = await loginApi(credentials)
      this.token = response.token
      this.userInfo = response.userInfo
      this.permissions = response.permissions
      return response
    },

    /**
     * 用户登出
     */
    logout() {
      this.token = ''
      this.userInfo = null
      this.permissions = []
    },
  },

  persist: {
    key: 'user-store',
    storage: localStorage,
    paths: ['token', 'userInfo'],
  },
})

# 代码检查
yarn lint

# 代码格式化
yarn lint:fix

# 类型检查
yarn type-check

# 清理缓存
yarn clean:cache

# 生成 API 类型
yarn openapi