📦 项目安装与运行指南
本文将详细介绍如何克隆、安装和运行 ruoyi-element-ai
项目,适用于开发人员和贡献者快速上手。
一、克隆项目
🛎️ 操作说明
从代码仓库克隆项目到本地,支持从 Gitee(国内镜像)或 GitHub 官方仓库获取代码。
🚀 Gitee 仓库(推荐国内用户)
git clone https://gitee.com/he-jiayue/ruoyi-element-ai.git
cd ruoyi-element-ai
🛠️ GitHub 仓库(国际用户)
git clone https://github.com/element-plus-x/ruoyi-element-ai.git
cd ruoyi-element-ai
二、安装依赖
⚙️ 环境准备
推荐使用 pnpm 包管理器(v8+),相比 npm/yarn 具有更快的安装速度和更优的依赖管理(避免幻影依赖)。
💿 安装命令
pnpm install
💡 提示:若遇到网络问题,可尝试配置 npm 镜像源(如淘宝镜像)后重新安装。
三、启动与构建
🌐 开发模式
启动本地开发服务器,支持热更新(HMR),修改代码后自动刷新页面。
pnpm run dev
访问地址:http://localhost:5173
(端口可在配置文件中修改)。
🚀 生产构建
生成用于部署的生产环境代码(压缩、优化资源),输出目录为 dist/
。
pnpm build
可通过 --mode
参数指定环境(如 pnpm build --mode staging
)。
四、代码校验与提交
✅ 代码质量检测
🔍 ESLint 代码规范检测
检查 JavaScript/TypeScript 代码是否符合规范,输出错误信息。
pnpm lint
🎨 StyleLint 样式格式化
自动修复 CSS/Scss 样式代码格式问题(需配合编辑器插件使用更佳)。
pnpm lint:stylelint
📤 规范提交
使用 commitizen
工具规范 Git 提交信息,提交前自动执行代码检测。
pnpm cz
按照交互提示选择提交类型(feat/fix/docs 等)并填写描述。
五、常见问题
**依赖安装失败?**尝试清除缓存后重新安装:
pnpm cache clean && pnpm install
。**端口被占用?**修改
vite.config.ts
中的server.port
配置项。**提交规范不通过?**确保代码已通过 ESLint 和 StyleLint 检测,提交信息符合开发规范。
通过以上步骤,您可以快速搭建项目开发环境并进行规范的代码管理。如需更多配置细节,请参考项目文档或联系技术支持。