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 第 10、63 行

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

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: {
                        tinymce: ['tinymce'],
                        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(),
            useEslintPlugin(),
            useDemoPlugin(),
        ],
        server: useServer(),
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
            },
        },
    })
}

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

移除 docs ​

  1. 删除 /docs 目录
  2. 卸载 vitepress 依赖
  3. 删除 package.json 第 16-18 行
    json
    {
    "name": "xy-admin",
    "private": true,
    "version": "2.10.1",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build:test": "vite build --mode test",
        "build:pre": "vite build --mode pre",
        "build:prod": "vite build --mode prod",
        "preview": "npm run build:prod && vite preview",
        "report": "vite build --mode prod",
        "lint": "eslint --config .eslintrc.cjs --ext .js,.vue --no-cache --fix src",
        "prettier": "prettier --config .prettierrc.cjs --write src/*.{js,vue} src/**/*.{js,vue}",
        "prepare": "husky install",
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "docs:preview": "vitepress build docs && vitepress preview docs"
    },
    "lint-staged": {
        "src/(**/)?*.{js,vue}": [
            "npm run prettier",
            "npm run lint"
        ]
    },
    "dependencies": {
        "@ant-design/colors": "^7.2.0",
        "@ant-design/icons-vue": "^7.0.1",
        "@floating-ui/dom": "^1.6.13",
        "@icon-park/vue-next": "^1.4.2",
        "@tinymce/tinymce-vue": "^5.1.1",
        "@vueuse/core": "^12.5.0",
        "ant-design-vue": "^4.2.6",
        "axios": "^1.7.9",
        "cropperjs": "^1.6.2",
        "dayjs": "^1.11.13",
        "echarts": "^5.6.0",
        "filesize": "^10.1.6",
        "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.6",
        "nanoid": "^5.0.9",
        "nprogress": "^0.2.0",
        "overlayscrollbars": "^2.10.1",
        "overlayscrollbars-vue": "^0.5.9",
        "pinia": "^2.3.1",
        "qrcode": "^1.5.4",
        "sortablejs": "^1.15.6",
        "tinymce": "^6.8.2",
        "version-polling": "^1.2.6",
        "vue": "^3.5.13",
        "vue-draggable-plus": "^0.5.3",
        "vue-router": "^4.5.0",
        "xy-enum": "^1.4.4",
        "xy-http": "^1.0.0",
        "xy-storage": "^3.1.1"
    },
    "devDependencies": {
        "@commitlint/cli": "^18.4.3",
        "@commitlint/config-conventional": "^18.4.3",
        "@vitejs/plugin-vue": "^5.2.1",
        "@vue/compiler-sfc": "^3.4.5",
        "autoprefixer": "^10.4.20",
        "commitlint": "^18.4.3",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-import": "^2.30.0",
        "eslint-plugin-prettier": "^5.2.1",
        "eslint-plugin-vue": "^9.28.0",
        "husky": "^8.0.3",
        "less": "^4.2.2",
        "lint-staged": "^15.2.0",
        "marked": "^14.1.2",
        "postcss": "^8.5.1",
        "rollup-plugin-visualizer": "^5.14.0",
        "tailwindcss": "^3.4.17",
        "vite": "^6.0.11",
        "vite-plugin-compression": "^0.5.1",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-progress": "^0.0.7",
        "vitepress": "^1.3.4"
    }
}

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