若依（ruoyi）分离版 纯前端教程
在此之前已经使用若依分离版vue2、vue3开发过两次大型项目，也使用过若依的移动版。相对来说这种开箱即用的框架我们只需稍微修改下就可以运用到我们的项目内里，那就以我的经验给大家分享下、有描述不敷的，欢迎大家多多指导！废话不多说~1.若依简介
若依官网地址：点击跳转
演示地址：点击跳转
代码下载：点击跳转
包罗六大点：
前后端分离：提供前后端分离的版本：使用的前端技术Vue、Element后端SpringBoot & Security完全分离的权限管理系统。
微服务版本：提供微服务架构的版本：使用的前端技术Vue、Element、后端Spring Cloud & Alibaba微服务的权限管理系统。
移动端版本：提供移动端架构的版本，支持H5、APP、微信小程序、支付宝小程序等，实现了与RuoYi-Vue背景完善对接。
代码生成器：在线配置表信息生成对应的代码，一键生成模块，包罗增删改查/排序/导出/权限控制等操作，编译即可使用。
功能完善：内置完整的权限架构，包罗：菜单、脚色、用户、字典、参数、监控、代码生成等一系列系统常规模块。
完全相应式结构：提供多终端适配：电脑、平板、手机等所有主流设备，提供多种不同风格的皮肤。页面美观，高端大气上档次。
项目简介
RuoYi 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部分管理、脚色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
主要特性
[*]完全相应式结构（支持电脑、平板、手机等所有主流设备）
[*]强盛的一键生成功能（包罗控制器、模子、视图、菜单等）
[*]支持多数据源，简朴配置即可实现切换。
[*]支持按钮及数据权限，可自定义部分数据权限。
[*]对常用js插件举行二次封装，使js代码变得简洁，更加易维护
[*]完善的XSS防范及脚本过滤，彻底杜绝XSS攻击
[*]Maven多项目依赖，模块及插件分项目，只管松耦合，方便模块升级、增减模块。
[*]国际化支持，服务端及客户端支持
[*]完善的日志记载体系简朴注解即可实现
[*]支持服务监控，数据监控，缓存监控功能。
内置功能
[*]用户管理：用户是系统操作者，该功能主要完成系统用户配置。
[*]部分管理：配置系统构造机构（公司、部分、小组），树结构展现支持数据权限。
[*]岗位管理：配置系统用户所属担任职务。
[*]菜单管理：配置系统菜单，操作权限，按钮权限标识等。
[*]脚色管理：脚色菜单权限分配、设置脚色按机构举行数据范围权限划分。
[*]字典管理：对系统中常常使用的一些较为固定的数据举行维护。
[*]参数管理：对系统动态配置常用参数。
[*]通知公告：系统通知公告信息发布维护。
[*]操作日志：系统正常操作日志记载和查询；系统异常信息日志记载和查询。
[*]登录日志：系统登录日志记载查询包罗登录异常。
[*]在线用户：当前系统中活跃用户状态监控。
[*]定时任务：在线（添加、修改、删除)任务调度包罗实行效果日志。
[*]代码生成：前后端代码的生成（java、html、xml、sql)支持CRUD下载 。
[*]系统接口：根据业务代码自动生成相关的api接口文档。
[*]服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
[*]缓存监控：对系统的缓存查询，查看、清算等操作。
[*]在线构建器：拖动表单元素生成相应的HTML代码。
[*]毗连池监视：监视当期系统数据库毗连池状态，可举行分析SQL找出系统性能瓶颈。
环境摆设
1、前往Gitee下载页面(https://gitee.com/y_project/RuoYi (opens new window))下载解压到工作目次
2.打开项目运行npm install 或 npm i安装node_modules，运行npm install dev 出现如下图表示启动成功。
https://i-blog.csdnimg.cn/direct/6bbed89d6fe34f16a2c81daeef664259.png
https://i-blog.csdnimg.cn/direct/ecb0bdec6f7f4d138b1fe832d401365a.png
左边导航栏在菜单管理去配置，导航栏下的二级页面是在项目router下index.js举行修改
https://i-blog.csdnimg.cn/direct/8b8a376935684a5b8272e33ea135a9f1.png
https://i-blog.csdnimg.cn/direct/8b6debe26b6a455a8a025a9f5e8f3b3f.png
配置好相关的数据字典信息即可正常使用
https://i-blog.csdnimg.cn/direct/081db46ca847428d8bb551f7b3176f28.png
代码生成
https://i-blog.csdnimg.cn/direct/567c65dd5e0e409e8c9e545038df1b88.png
https://i-blog.csdnimg.cn/direct/bc3fb8f798414250952d53316af12cd1.png
文件结构
├── build // 构建相关
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── .editorconfig // 编码格式
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .eslintignore // 忽略语法检查
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel.config.js
├── package.json // package.json
└── vue.config.js // vue.config.js
创作不易 三连支持~~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]