快速开始

仓库地址

前端地址: https://gitee.com/dapppp/ruoyi-plus-vben.git 快速前往

注意只适配 5.x 分支 即 jdk17

JDK8 分支(见名之意) 简单适配 好像还有点小问题

后端地址: 分布式版本

后端地址: 微服务版本

分支说明

分支	说明
main	主分支, follow 后端
dev	开发分支, 基本也是 follow 后端 dev
jdk8	见名之意
master	老版本 antdv3 归档

环境要求

目前(package.json 要求) 用 pnpm 安装

"engines": {
  "node": ">=18.12.0",
  "pnpm": ">=9.0.4"
}

vscode/webstorm 按自己喜好

推荐 vscode

vue/react 主推 vscode

Vue3 IDE 支持

React 你的编辑器

安装依赖

注意

确保后端服务已经启动

clone 项目后根目录执行

pnpm install

安装依赖

修改配置项

修改.env.development配置 后端没改的话这里不用动

提示

RSA 公私钥一定要匹配

请求加密(前端)-后端解密是一对

响应加密(后端)-前端解密是一对

总共要两对 RSA 公私钥 登录默认启用请求加密功能 如果没有用到响应解密功能 响应解密 RSA 的配置项可空

# public path
VITE_PUBLIC_PATH = /

# 后台请求路径 具体在vite.config.ts配置代理
VITE_GLOB_API_URL=/basic-api

# 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
VITE_GLOB_ENABLE_ENCRYPT=true
# RSA公钥 请求加密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PUBLIC_KEY=默认
# RSA私钥 响应解密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PRIVATE_KEY=默认
# 客户端id
VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e

# 开启WEBSOCKET
VITE_GLOB_WEBSOCKET_ENABLE=true

可选项

菜单图标导入

详见菜单栏图标

后端代码生成

详见 项目启动后 代码生成表格右上角如何使用代码生成 也可到演示站查看

/**
 * API_KEY 替换成你自己的
 */
export const API_KEY = "your_api_key";

VITE 代理和默认端口号

根目录vite.config.ts配置

import { defineApplicationConfig } from "@vben/vite-config";

export default defineApplicationConfig({
  overrides: {
    server: {
      port: 8080, //配置自定义端口号
      // 按照格式配置即可
      proxy: {
        "/basic-api": {
          target: "http://localhost:8080",
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ""),
          // only https
          // secure: false
        },
      },
    },
  },
});

启动项目

执行npm run dev启动项目 没有修改端口默认为5173

vscode 插件推荐

插件名	功能描述
Vue-Official	Vue 官方插件
Prettier	代码格式化
ESLint	代码检查
Code Spell Checker	英文拼写检查
EditorConfig	统一代码风格
Iconify IntelliSense	图标提示
stylelint	样式检查
unocss	unocss 类名提示
dotenv	env 高亮
One Dark Pro	主题, 原版不支持组件高亮