huimv-baqing/ruoyi-screen

ruoyi-screen

Vue 3 + Vite + ECharts 大屏前端子项目（与 ruoyi-ui 独立）。

规范说明：doc/可视化大屏.md
Cursor 规则：仓库根目录 .cursor/rules/ruoyi-screen.mdc（编辑本目录下文件时会自动带上约束）

注意：本仓库根目录 huimv-baqing 下没有 package.json，必须在进入 ruoyi-screen 后再执行 npm 命令。 若在根目录运行 npm run dev，会报错 ENOENT: no such file or directory, open '.../package.json'。

环境

• Node.js ≥ 16.14 即可（当前使用 Vite 4，避免在 Node 16 上出现 crypto.getRandomValues is not a function；Vite 5 需 Node ≥ 18）。
• 若已升级 Node ≥ 18，可自行把 package.json 里 vite、@vitejs/plugin-vue 升到 5.x。

命令

cd ruoyi-screen
npm install
npm run dev

浏览器访问终端里打印的本地地址（一般为 http://localhost:5173）。

npm run build
npm run preview

ECharts 用法

封装组件：src/components/ScreenChart.vue
传入 option（与 ECharts option 一致），组件负责 init / resize / dispose。

按需可改为：

import * as echarts from "echarts/core"
import { BarChart } from "echarts/charts"
import { GridComponent, TooltipComponent, TitleComponent } from "echarts/components"
import { CanvasRenderer } from "echarts/renderers"
echarts.use([BarChart, GridComponent, TooltipComponent, TitleComponent, CanvasRenderer])

以减小打包体积。

常见问题（npm run dev 报错）

1. ENOENT / 找不到 package.json
   先执行：cd ruoyi-screen（或你的本机路径下的 ruoyi-screen），再 npm install、npm run dev。

2. 找不到 vite / 依赖不完整
   在 ruoyi-screen 目录执行：npm install。

3. 端口被占用
   修改 vite.config.js 里 server.port，或关掉占用 5173 端口的程序。

4. crypto.getRandomValues is not a function（启动 dev 失败）
   多为 Node 16 + Vite 5 不兼容。本项目已固定 Vite 4；请在 ruoyi-screen 目录删除 node_modules 与 package-lock.json 后重新执行 npm install。仍建议长期升级到 Node 18 LTS。