Skip to content

Latest commit

 

History

History
232 lines (137 loc) · 6.9 KB

README.md

File metadata and controls

232 lines (137 loc) · 6.9 KB

Vue3 Admin

Installation and use

Environment requirements: The version requires Node 14.18+ / 16+ and above. Node 12 / 13 / 15 is no longer supported. It is recommended to use pnpm. If you use yarn, please use Yarn1.x version, otherwise the dependencies may not be installed.

  • Get the project code
git clone https://github.com/jeecgboot/jeecgboot-vue3.git
  • Installation dependencies
cd jeecgboot-vue3

pnpm install
  • 配置接口地址 .env.development
VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot

说明:把http://localhost:8080/jeecg-boot 换成自己地址,其他不用改。

  • run
pnpm serve
  • build
pnpm build

Docker镜像启动前端(单体模式)

  • host设置

注意: 需要把127.0.0.1替换成真实IP 比如192.开头,不然后端不通。

127.0.0.1 jeecg-boot-system
127.0.0.1 jeecg-boot-gateway
  • 下载项目
git clone https://github.com/jeecgboot/jeecgboot-vue3.git

cd jeecgboot-vue3
  • 配置接口域名 .env.production
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://jeecg-boot-system:8080/jeecg-boot

后台单体启动 见此文档

  • 编译项目
pnpm install

pnpm build
  • 启动容器
docker build -t jeecgboot-vue3 .
docker run --name jeecgboot-vue3-nginx -p 80:80 -d jeecgboot-vue3
  • 访问前台

http://localhost

Docker镜像启动前端(微服务模式)

这里只写与单体的区别步骤

  • 区别1. 修改后台域名 .env.production
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://jeecg-boot-gateway:9999

后台微服务启动 见此文档

  • 区别2. 修改Dockerfile文件
- 把`http://jeecg-boot-system:8080/jeecg-boot`替换成 `http://jeecg-boot-gateway:9999`
- 把`jeecg-boot-system`替换成 `jeecg-boot-gateway`
  • 其他与单体模式一样
镜像需要重现构建,最好把单体的镜像删掉,重新构建docker镜像。

入门必备

本项目需要一定前端基础知识,请确保掌握 Vue 的基础知识,以便能处理一些常见的问题。 建议在开发前先学一下以下内容,提前了解和学习这些知识,会对项目理解非常有帮助:

浏览器支持

本地开发推荐使用Chrome 最新版浏览器,不支持Chrome 90以下版本。

生产环境支持现代浏览器,不支持 IE。

IEIE  EdgeEdge FirefoxFirefox ChromeChrome SafariSafari
not support last 2 versions last 2 versions last 2 versions last 2 versions

流程设计

输入图片说明

输入图片说明

输入图片说明

简版流程设计

仪表盘设计器

报表设计器

表单设计器

大屏设计器

报表效果

接口文档

手机端

PAD端