XYAdmin

Appearance

开始使用 ​

介绍 ​

XYAdmin 是一个企业级中后台前端解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践。

本项目默认你有一定的 Vue 基础和 Antd 使用经验,如果你对这些还不熟悉，我们建议你先查阅相关文档 Vue、Pinia、 Vite、Ant Design Vue

基于上述目标和提供了以下的典型模板，并据此构建了一套基于 Ant Design Vue 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。

前期准备 ​

你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、Vue.Js、Pinia、Vue-Router、Ant Design Vue，提前了解和学习这些知识会非常有帮助。

  • node 版本 >= 16.18

获取代码 ​

从 GitHub 仓库中直接安装最新的脚手架代码。

shell
# 克隆仓库
git clone --depth=1 https://github.com/mengxianghan/xy-admin.git my-project

目录结构 ​

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

project_name
├ .husky                 husky 配置目录
├ .vscode                vscode 配置目录（可忽略）
├ config                 框架配置文件，vite.config 中用到的插件
├ dist                   存放打包后文件（可忽略）
├ docs                   使用文档（正式使用时可删除）
├ node_modules           安装的依赖（可忽略）
├ public                 存放静态资源，不会被打包直接输出到 dist 目录中
│  ├ images              不需要打包的图片（可存放到 oss）
│  ├ libs                非 npm 安装第三方插件（可存放到 oss）
├ src
│  ├ apis                接口
│  │  ├ modules          按功能模块区分的接口文件
│  │  │  ├ home.js
│  │  ├ index.js         统一导出 api
│  ├ assets              存放静态资源，例如：图标，与public不同的是这里的文件会被打包到代码中
│  ├ styles              样式
│  ├ hooks               钩子
│  ├ directives          指令
│  ├ enums               枚举
│  ├ components          公共组件
│  │  ├ common           组件的公共资源
│  │  │  ├ images
│  │  │  ├ js
│  │  │  ├ style
│  │  ├ index.js          自动化引入所有组件，并统一导出
│  │  ├ icon.js           自定义图标统一导出
│  │  ├ Empty.vue         示例
│  │  ├ LoadMore.vue      示例
│  │  ├ SubmitBar.vue     示例
│  │  ├ Grid              示例
│  │  │  ├ Grid.vue       示例
│  │  │  ├ GridItem.vue   示例
│  ├ core                 核心文件
│  │  ├ permission.js      统一权限验证
│  │  ├ index.js          统一引入
│  ├ layouts              公共模板
│  ├ router               vue-router
│  │  ├ modules           按功能拆分的模块
│  │  │  ├ home.js
│  │  ├ index.js          自动化引入，并统导出
│  ├ store                状态管理
│  │  ├ modules           按功能拆分的模块
│  │  │  ├ app.js
│  │  │  ├ user.js
│  │  ├ index.js          导出所有配置
│  ├ utils                工具类
│  │  ├ request           接口请求类（目前使用的 axios ，可根据实际需求进行调整）
│  ├ views                视图
│  │  ├ product           示例，路由对应目录/文件
│  │  │  ├ components     示例，私有组件
│  │  │  ├ index.vue      示例
│  ├ App.vue
│  ├ main.js              入口文件
├ .env.dev                本地开发环境配置文件
├ .env.test               测试环境变量文件
├ .env.pre                预生产环境变量文件
├ .env.prod               生产环境配置文件
├ .prettierignore         prettier 代码格式化忽略文件
├ .prettierrc             prettier 代码格式化规则配置文件
├ .eslintignore           eslint 忽略文件
├ .eslintrc.js            eslint 配置文件
├ lintstagedrc.js         lint-staged 配置文件
├ package.json
├ package-lock.json
├ README.md               描述文件，说明项目简要信息（项目说明、使用方式等）
├ vite.config.js          vue 配置文件（vite 构建方式配置文件）

本地开发 ​

TIP

如果网络状况不佳，可以使用 cnpm 进行加速，并使用 cnpm 代替 npm 或设置源，如：npm config set registry https://registry.npmmirror.com

shell
# 安装依赖
npm install

# 本地运行
npm run dev

# 构建，本框架中包含各种环境的构建命令，详细请查看 package.json 中 script
npm run build:prod

启动成功后能看到下面的页面就代表成功了。

login

接下来你可以修改代码进行业务开发了，框架中内建了典型业务模板、常用业务组件、全局路由等等各种实用的功能辅助开发，你可以继续阅读文档。

精简框架 ​

提示

目前框架中含有演示代码和使用文档，在正式使用时可按照以下方式进行精简。

移除 DemoBox ​

  1. 删除 src/components/components.js 第 7 行

    js
    export { default as ActionButton } from './ActionButton/ActionButton.vue'
export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.vue'
export { default as Button } from './Button/Button.vue'
export { default as Cascader } from './Cascader/Cascader.vue'
export { default as Chart } from './Chart/Chart.vue'
export { Cropper, CropperDialog } from './Cropper'
export { DemoBox, DemoBoxGroup } from './DemoBox'
export { default as Editor } from './Editor/Editor.vue'
export { default as Ellipsis } from './Ellipsis/Ellipsis.vue'
export { Filter, FilterItem } from './Filter'
export { default as FormTable } from './FormTable/FormTable.vue'
export { Grid, GridItem } from './Grid'
export { InfiniteScroll } from './InfiniteScroll'
export { Loading } from './Loading'
export { Popover, usePopover } from './Popover'
export { Preview } from './Preview'
export { default as QRCode } from './QRCode/QRCode.vue'
export { default as ResizeBox } from './ResizeBox/ResizeBox.vue'
export { default as Scrollbar } from './Scrollbar/Scrollbar.vue'
export { Search, SearchItem } from './Search'
export { default as SendCode } from './SendCode/SendCode.vue'
export { TableColumnSetting } from './Table'
export { default as Tag } from './Tag/Tag.vue'
export { default as TagSelect } from './TagSelect/TagSelect.vue'
export { default as Toolbar } from './Toolbar/Toolbar.vue'
export { default as Transfer } from './Transfer/Transfer.vue'
export { default as Tree } from './Tree/Tree.vue'
export { UploadImage, UploadInput } from './Upload'

  2. 删除 src/components/DemoBox 目录

  3. 删除 vite.config.js 第 5、62 行

    js
    import path from 'node:path'
import process from 'node:process'
import { defineConfig, loadEnv } from 'vite'
import useCompressPlugin from './config/useCompressPlugin'
import useDemoPlugin from './config/useDemoPlugin'
import useProgressPlugin from './config/useProgressPlugin'
import useServer from './config/useServer'
import useVisualizerPlugin from './config/useVisualizerPlugin'
import useVuePlugin from './config/useVuePlugin'
import pkg from './package.json'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return defineConfig({
    base: env.VITE_PUBLIC_PATH,
    build: {
      outDir: env.VITE_OUT_DIR,
      target: 'es2015',
      cssTarget: 'chrome80',
      brotliSize: false,
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          manualChunks: {
            'echarts': ['echarts'],
            'lodash-es': ['lodash-es'],
            'ant-design-vue': ['ant-design-vue'],
            'jschardet': ['jschardet'],
            'qrcode': ['qrcode'],
            'cropper': ['cropperjs'],
          },
        },
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `
                true;
                @import '${path.resolve(__dirname, 'src/styles/variables.less')}';
                @import '${path.resolve(__dirname, 'src/styles/mixins/index.less')}';
             `,
          },
          javascriptEnabled: true,
        },
      },
      devSourcemap: true,
    },
    define: {
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
      __APP_INFO__: JSON.stringify({
        version: pkg.version,
      }),
    },
    plugins: [
      useVuePlugin(),
      useProgressPlugin(),
      useCompressPlugin(),
      useVisualizerPlugin(),
      useDemoPlugin(),
    ],
    server: useServer(),
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  })
}

  4. 卸载 @vue/compiler-sfc 依赖

移除 docs ​

  1. 删除 /docs 目录
  2. 卸载 vitepress 依赖
  3. 删除 package.json 第 15-17 行
    json
    {
  "name": "xy-admin",
  "type": "module",
  "version": "2.10.2",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build:test": "vite build --mode test",
    "build:pre": "vite build --mode pre",
    "build:prod": "vite build --mode prod",
    "preview": "pnpm run build:prod && vite preview",
    "report": "vite build --mode prod",
    "lint": "eslint .",
    "prepare": "husky || true",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress build docs && vitepress preview docs"
  },
  "dependencies": {
    "@ant-design/colors": "^8.0.0",
    "@ant-design/icons-vue": "^7.0.1",
    "@floating-ui/dom": "^1.7.3",
    "@icon-park/vue-next": "^1.4.2",
    "@tinymce/tinymce-vue": "^6.3.0",
    "@vueuse/core": "^13.6.0",
    "ant-design-vue": "^4.2.6",
    "axios": "^1.11.0",
    "cropperjs": "^1.6.2",
    "dayjs": "^1.11.13",
    "echarts": "^6.0.0",
    "filesize": "^11.0.2",
    "filesize-parser": "^1.5.1",
    "highlight.js": "^11.11.1",
    "install": "^0.13.0",
    "jschardet": "^3.1.4",
    "json-bigint": "^1.0.0",
    "lodash-es": "^4.17.21",
    "mime": "^4.0.7",
    "nanoid": "^5.1.5",
    "nprogress": "^0.2.0",
    "overlayscrollbars": "^2.11.4",
    "overlayscrollbars-vue": "^0.5.9",
    "pinia": "^3.0.3",
    "qrcode": "^1.5.4",
    "sortablejs": "^1.15.6",
    "version-polling": "^1.3.3",
    "vue": "^3.5.18",
    "vue-draggable-plus": "^0.6.0",
    "vue-router": "^4.5.1",
    "xy-enum": "^1.4.4",
    "xy-http": "^1.0.0",
    "xy-storage": "^3.1.1"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^5.1.0",
    "@commitlint/cli": "^19.8.1",
    "@commitlint/config-conventional": "^19.8.1",
    "@types/node": "^22.15.9",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/compiler-core": "^3.5.18",
    "@vue/compiler-sfc": "^3.5.18",
    "autoprefixer": "^10.4.21",
    "commitlint": "^19.8.1",
    "eslint": "^9.32.0",
    "eslint-plugin-format": "^1.0.1",
    "husky": "^9.1.7",
    "less": "^4.4.0",
    "lint-staged": "^16.1.4",
    "marked": "^16.1.2",
    "postcss": "^8.5.6",
    "rollup-plugin-visualizer": "^6.0.3",
    "tailwindcss": "^3.4.17",
    "vite": "^7.0.6",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-progress": "^0.0.7",
    "vitepress": "^1.6.3"
  },
  "lint-staged": {
    "src/(**/)?*.{js,vue}": [
      "pnpm lint"
    ]
  }
}

本文档内容版权为 XYAdmin 作者所有，保留所有权利。