快速开始
环境要求
必须使用node>20+ & pnpm安装依赖
建议使用 node 最新 lts 版本 pnpm latest 版本
json
"engines": {
"node": ">=20.15.0",
"pnpm": "latest"
},注意
暂时不支持离线图标 如果确定要部署在内网环境 慎重选择!
/>=1.1.0 版本已经支持
vscode/webstorm 按自己喜好
推荐 vscode, 项目已经自带 vscode 配置, 包括自动格式化/eslint 等功能
vue/react 主推 vscode
安装依赖
clone 项目后根目录执行命令来安装依赖
bash
pnpm install修改配置项
项目使用ant-design-vue作为基础组件库, 具体开发路径为根目录/apps/web-antd, 项目开发只需要关注这个目录
修改.env.development配置 后端没改的话这里不用动
提示
RSA 公私钥一定要匹配
请求加密(前端)-后端解密是一对
响应加密(后端)-前端解密是一对
总共要两对 RSA 公私钥 登录默认启用请求加密功能 如果没有用到响应解密功能 响应解密 RSA 的配置项可空
ini
# 端口号
VITE_PORT=5666
# 基础路径 会影响打包结果/router路径 使用非根目录部署需要修改这里
VITE_BASE=/
# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
VITE_NITRO_MOCK=false
# 是否打开 devtools，true 为打开，false 为关闭
VITE_DEVTOOLS=false
# 是否注入全局loading
VITE_INJECT_APP_LOADING=true
# 后台请求路径 具体在vite.config.mts配置代理
VITE_GLOB_API_URL=/api
# 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
VITE_GLOB_ENABLE_ENCRYPT=true
# RSA公钥 请求加密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PUBLIC_KEY=xx
# RSA私钥 响应解密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PRIVATE_KEY=xx
# 客户端id
VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e
# 开启WEBSOCKET
VITE_GLOB_WEBSOCKET_ENABLE=false可选项
菜单图标导入
使用iconify图标 可导入根目录/scripts/菜单图标替换sql/update_icon.sql进行替换
代码生成
v5 版本代码生成为付费功能
启动项目
注意
确保后端服务已经启动
执行pnpm run dev:antd启动项目 没有修改端口默认为5666
vscode 插件推荐
| 插件名 | 功能描述 |
|---|---|
| Vue-Official | Vue 官方插件 |
| Prettier | 代码格式化 |
| ESLint | 代码检查 |
| Code Spell Checker | 英文拼写检查 |
| EditorConfig | 统一代码风格 |
| Iconify IntelliSense | 图标提示 |
| stylelint | 样式检查 |
| Tailwind CSS IntelliSense | tailwind 类名提示 |
| json2ts | json 转 ts interface |
| DotENV | env 高亮 |
| Color Highlight | 可高亮颜色值 显示对应颜色 |
| One Dark Pro | 主题, 原版不支持组件高亮 |