xgsym-cloud微服务架构系统开发指南之快速启动（前端项目）

目标：将项目 xgsym-cloud 的前端项目运行起来

1. 管理后台

项目的管理后台有 4 个版本：

• xgsym-web-admin-vue2：最新基于 Vue2 + element-ui pc实现的管理后台

1.1 Vue3 + element-plus 版本

xgsym-web-admin-vue3是前端 Vue3 管理后台项目。

① 克隆 xxx 项目，并 Star 关注下该项目。

② 在根目录执行如下命令，进行启动：

# 安装 pnpm，提升依赖的安装速度npm config set registry https://registry.npmjs.orgnpm install -g pnpm# 安装依赖pnpm install
# 启动服务npm run dev

③ 启动完成后，浏览器会自动打开 http://localhost:80地址，可以看到前端界面。

TODO

友情提示：Vue3 使用 Vite 构建，所以它存在如下的情况，都是正常的：

1. 项目启动很快，浏览器打开需要等待 1 分钟左右，请保持耐心。

2. 点击菜单，感觉会有一点卡顿，因为 Vite 采用懒加载机制。不用担心，最终部署到生产环境，就不存在这个问题了。

详细说明，可见 《为什么有人说 Vite 快，有人却说 Vite 慢？》文章。

1.2 Vue3 + vben(ant-design-vue) 版本

xgsym-web-admin-vben是前端 Vue3 + vben(ant-design-vue) 管理后台项目。

① 克隆 xxx 项目，并 Star 关注下该项目。

② 在根目录执行如下命令，进行启动：​​​​​​​

# 安装 pnpm，提升依赖的安装速度npm config set registry https://registry.npmjs.orgnpm install -g pnpm# 安装依赖pnpm install
# 启动服务npm run dev

③ 启动完成后，浏览器会自动打开 http://localhost:80地址，可以看到前端界面。TODO

1.3 Vue2 + element-ui 版本

xgsym-web-admin-vue2是前端 Vue2 管理后台项目。

① 克隆 https://gitee.com/xgsym/xgsym-web-admin-vue2.git项目，并 Star 关注下该项目。

② 在根目录执行如下命令，进行启动：​​​​​​​

# 安装 Yarn，提升依赖的安装速度npm install --global yarn# 安装依赖yarn install
# 启动服务npm run local

③ 启动完成后，浏览器会自动打开 http://localhost地址，可以看到前端界面。

1.4 Vue2 + uni-app 版本

xgsym-web-admin-uniapp 是前端 uni-app 管理后台项目。

① 克隆 xxx 项目，并 Star 关注下该项目。

② 下载 HBuilder工具，并进行安装。

③ 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 yudao-ui-admin-uniapp目录。

④ 执行如下命令，安装 npm 依赖：​​​​​​​

# 安装 npm 依赖npm i

⑤ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：

TODO

友情提示：登录时，滑块验证码，在内存浏览器可能存在兼容性的问题，此时使用 Chrome 浏览器，并使用“开发者工具”，设置为 iPhone 12 Pro 模式！

2. uni-app 商城移动端

xgsym-mall-uniapp 是前端 uni-app 商城移动端项目。

前置任务：

需要参考 《商城手册 —— 功能开启》 文档，将商城的后端启动。

① 克隆 xxx 项目，并 Star 关注下该项目。

② 下载 HBuilder工具，并进行安装。

③ 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择克隆的 xgsym-mall-uniapp 目录

④ 执行如下命令，安装 npm 依赖：​​​​​​​

# 安装 npm 依赖npm i

⑤ 点击 HBuilder 的 [运行 -> 运行到浏览器 -> Chrome] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：

3.反馈交流

欢迎加入用户交流群，一起学习技术练基本功，每日精进。

如果微信提示“提示对方被加好友过于频繁，请稍后再试？”，可以过一会再试试看！项目关注和使用的人太多了~