%20(2).svg)
项目简介
本项目是一套可直接使用的中后台前端框架，从0到1搭建而成。功能全面，能提升开发者单兵作战能力，助力开发者全面应用技术点并查漏补缺。其中权限管理是突出亮点，为项目的安全性和可管理性提供有力支撑。
项目的主要特性和功能
- 路由管理：采用复合组合路由，支持公共布局，解决页面重定向与404页面配置问题。用NProgress进度条提升交互体验，通过路由守卫在路由切换时执行操作。
- 权限管理：提供路由、组件、指令三种权限控制方式。可根据用户权限渲染路由列表，隐藏无权限菜单，权限不足时给出提示。
- 主题设计：支持主题定制与动态切换，可配置全局风格，修改主题时去掉进度条。
- 菜单设计：左侧菜单与路由关联，通过递归处理多级菜单，支持图标和名称自定义。
- 图表封装：封装通用Echart图表组件，监听dom元素大小变化，用防抖函数提升性能，可传参指定图表类型。
- 数据模拟：前后分离开发，用MOCK数据模拟接口，可根据环境变量切换mock和正式环境。
- 表单处理：提供基础表单和复杂分步表单实现方案，支持自定义表单校验。
- 图标管理：支持添加iconfont，有本地化和CDN两种使用方式，特殊SVG图标采用组件式使用。
- 国际化支持：支持Antd组件和第三方库国际化，用vue - i18n实现项目整体国际化，可通过路由切换语言。
- 打包优化：通过icon、组件、moment、echart按需加载等方式优化打包，减小代码体积。
- 组件文档：生成可交互组件文档，用highlight.js高亮展示组件代码。
- 单元测试：使用Jest进行单元测试，生成测试报告，提高代码质量和可维护性。
安装使用步骤
下载源码
用户需提前下载本项目的源码文件。
安装依赖
进入项目目录，在命令行中运行yarn install安装所需的依赖包。部分重要依赖安装说明如下：
- 安装UI组件库和日期处理库：yarn add ant - design - vue moment
- 安装按需加载babel：yarn add babel - plugin - import --dev
- 安装NProgress进度条：yarn add nprogress
- 安装Echart图表库：npm install echarts --save
- 安装监听dom元素大小的库：npm i --save resize - detector
- 安装lodash工具库：npm i --save lodash
- 安装axios：cnpm i axios
- 安装跨平台设置环境变量的脚本：cnpm i cross - env
- 安装jsx相关依赖：npm install @vue/babel - preset - jsx @vue/babel - helper - vue - jsx - merge - props
- 安装antd主题切换插件：cnpm i antd - theme - webpack - plugin
- 安装raw - loader：cnpm i raw - loader --save - dev
- 安装vue - highlightjs：cnpm i --save vue - highlightjs
- 安装query - string：npm install query - string
- 安装nrm：npm install -g nrm
配置项目
- 配置个性化webpack和babel，在
vue.config.js和babel.config.js中进行相应配置。 - 配置ant - design - vue按需加载，在
babel.config.js和main.js中进行配置。 - 配置路由，在
router/index.js中定义路由规则和路由守卫。 - 配置主题和国际化，在
vue.config.js、index.html、main.js等文件中进行相应配置。
启动项目
运行yarn serve启动开发服务器，访问http://localhost:8080查看项目运行效果。若要使用mock数据，可运行yarn serve:mock。
打包部署
项目开发完成后，运行yarn build进行项目打包，将打包后的文件部署到生产环境。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】