| 快速启动（我是前端） | 您所在的位置：网站首页 › vue调用本地exe › 快速启动（我是前端） |
快速启动（我是前端）
|
目标：在 本地 将前端项目运行起来，使用 远程 演示环境的后端服务。 整个过程非常简单，预计 5 分钟就可以完成，取决于大家的网速。 ↓↓↓ 技术交流群，一起苦练技术基本功，每日精进 30 公里！↓↓↓
友情提示： 远程 演示环境的后端服务，只允许 GET 请求，不允许 POST、PUT、DELETE 等请求。 如果你要完整的后端服务，建议后续参考 《快速启动（我是后端）》 文档，将后端服务运行起来。 # 👍 相关视频教程 从零开始 02：在 Windows 环境下，如何运行前后端项目？ (opens new window) 从零开始 03：在 MacOS 环境下，如何运行前后端项目？ (opens new window) # 1. Apifox 接口工具点击 Apifox (opens new window) 首页，下载对应的 Apifox 桌面版。如下图所示： 为什么要下载 Apifox 桌面版？ 艿艿已经卸载 Postman，使用 Apifox 进行替代。国产软件，yyds 永远滴神！ 国内很多互联网公司，包括百度、阿里、腾讯、字节跳动等等在内，都在使用 Apifox 作为 API 工具。
解压后，双击进行安装即可。黑色界面，非常酷炫。
接口文档？ 阅读 《开发指南 —— 接口文档》 呀~~ # 2. 启动 Vue2 管理后台yudao-ui-admin (opens new window) 是前端 Vue2 管理后台项目。 〇 克隆 https://github.com/YunaiV/ruoyi-vue-pro.git (opens new window) 项目，并 Star 关注下该项目。 ① 在 yudao-ui-admin 目录下，执行如下命令，进行启动： # 进入项目目录 cd yudao-ui-admin # 安装 Yarn，提升依赖的安装速度 npm install --global yarn # 安装依赖 yarn install # 启动服务 npm run front
友情提示：可能胖友本地没有安装 Node.js 的环境，导致报错。可以参考如下文档安装： Windows 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/windows-install (opens new window) Mac 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/mac-install (opens new window)注意，Node 请使用 14 或者 16 的版本！！！例如说，艿艿本地的是 Now using node v14.15.3 (npm v6.14.9) 版本。 ② 启动完成后，浏览器会自动打开 http://localhost:1024 (opens new window) 地址，可以看到前端界面。
yudao-ui-admin-vue3 (opens new window) 是前端 Vue3 管理后台项目。 ① 克隆 https://github.com/yudaocode/yudao-ui-admin-vue3.git (opens new window) 项目，并 Star 关注下该项目。 ② 在根目录执行如下命令，进行启动： # 安装 pnpm，提升依赖的安装速度 npm config set registry https://registry.npmjs.org npm install -g pnpm # 安装依赖 pnpm install # 启动服务 npm run front③ 启动完成后，浏览器会自动打开 http://localhost:80 (opens new window) 地址，可以看到前端界面。
友情提示：Vue3 使用 Vite 构建，所以它存在如下的情况，都是正常的： 项目启动很快，浏览器打开需要等待 1 分钟左右，请保持耐心。 点击菜单，感觉会有一点卡顿，因为 Vite 采用懒加载机制。不用担心，最终部署到生产环境，就不存在这个问题了。详细说明，可见 《为什么有人说 Vite 快，有人却说 Vite 慢？》 (opens new window) 文章。 # 4. 启动 uni-app 管理后台yudao-ui-admin-uniapp (opens new window) 是前端 uni-app 管理后台项目。 〇 克隆 https://github.com/YunaiV/ruoyi-vue-pro.git (opens new window) 项目，并 Star 关注下该项目。 ① 下载 HBuilder (opens new window) 工具，并进行安装。 ② 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 yudao-ui-admin-uniapp 目录。 然后，修改 config.js 配置文件的 baseUrl 后端服务的地址为 'http://api-dashboard.yudao.iocoder.cn。如下图所示：
③ 执行如下命令，安装 npm 依赖： # 进入项目目录 cd yudao-ui-admin-uniapp # 安装 npm 依赖 npm i④ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：
友情提示：登录时，滑块验证码，在内存浏览器可能存在兼容性的问题，此时使用 Chrome 浏览器，并使用“开发者工具”，设置为 iPhone 12 Pro 模式！ # 5. 启动 uni-app 用户前台yudao-ui-app (opens new window) 是前端 uni-app 用户前台项目。 〇 克隆 https://github.com/YunaiV/ruoyi-vue-pro.git (opens new window) 项目，并 Star 关注下该项目。 ① 下载 HBuilder (opens new window) 工具，并进行安装。 ② 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 yudao-ui-app 目录 然后，修改 config.js 配置文件的 baseUrl 后端服务的地址为 'http://api-dashboard.yudao.iocoder.cn/app-api。如下图所示：
③ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：
如果你想参与到前端项目的开发，可以微信 wangwenbin-server 噢。 近期，重点开发 Vue3 管理后台、uniapp 商城，欢迎大家参与进来。 |
【本文地址】