若依管理系统RuoYi-Vue（一）：项目启动和菜单创建

本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本

若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧，看看gitee上的star数量，着实惊人。若依系统有很多个版本

版本	gitee地址	说明
前后端不分离版本	https://gitee.com/y_project/RuoYi	应该是第一版若依系统，star数量最多，但是前端界面比较丑
前后端分离版本	https://gitee.com/y_project/RuoYi-Vue	该版本前后端分离，而且前端使用Vue重写了，后端权限部分使用了spring seurity+jwt实现，和原来的前后端不分离版本似乎有所不同
微服务版本	https://gitee.com/y_project/RuoYi-Cloud	相对于前后端分离版本，微服务版本将模块拆分的更细，并且单独作为一个服务对外暴露，通过服务发现相互调用

个人觉得前后端不分离版本太丑，而且前后端不分离维护起来也比较困难，而微服务版本又拆分的太细，前后端分离版本则正好，本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本。

一、项目启动

首先下载源代码 https://gitee.com/y_project/RuoYi-Vue ，下载完之后打开doc文件夹，查看使用说明书。综合使用说明书和实际操作，可以得到以下几点：

后端启动项目是ruoyi-admin，启动类是com.ruoyi.RuoYiApplication；前端项目是ruoyi-ui
后端项目使用maven构建，使用前需确保maven环境；前端是vue项目，使用前需确保node环境
后端项目依赖mysql和redis，启动前需要修改application.yml配置文件和application-druid.yml配置文件修改对应的配置。
mysql数据初始化，需要创建ruoyi数据库并且依次执行sql文件夹下的ry_20210108.sql、quartz.sql文件

所以，操作上：

第一步，创建ruoyi数据库，并且执行sql文件夹下的ry_20210108.sql、quartz.sql

第二步，修改application.yml配置文件和application-druid.yml配置文件中的redis和mysql的连接配置

第三步，在项目根目录下执行mvn clean package -DskipTests命令下载后端项目依赖；在ruoyi-ui模块下执行npm install --registry=https://registry.npm.taobao.org命令安装前端项目依赖

第四步，打开ruoyi-admin项目的启动类com.ruoyi.RuoYiApplication，并执行main方法，运行后端代码；打开ruoyi-ui模块，执行命令npm run dev运行前端代码

第五步，打开浏览器输入网址http://127.0.0.1，看到以下页面就表示前后端项目均已经成功运行

二、修改前端默认设置

登录若依系统之后，看到的页面是这样子的

如果想侧边栏变成白色主题，关闭tabview，只需要依次点击头像->布局设置，即可切换主题、打开或者关闭tabview功能，但是页面一刷新就失效了，想要永久生效，则需要改变前端代码的默认设置。

打开前端项目ruoyi-ui，找到ruoyi-ui/src/settings.js文件，里面的配置项和页面布局中的选项一一对应，这里如果做了修改，则永久生效

module.exports = {
  title: \'若依管理系统\',

  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
  sideTheme: \'theme-dark\',

  /**
   * 是否系统布局配置
   */
  showSettings: false,

  /**
   * 是否显示 tagsView
   */
  tagsView: true,

  /**
   * 是否固定头部
   */
  fixedHeader: false,

  /**
   * 是否显示logo
   */
  sidebarLogo: true,

  /**
   * @type {string | array} \'production\' | [\'production\', \'development\']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass [\'production\', \'development\']
   */
  errorLog: \'production\'
}