若依微服务15 - RuoYi-Vue3 实现前端独立运行

正文开始:

RuoYi-Vue3 使用 Vue3 + Element Plus + Vite 技术栈。
GitHub 开源地址:https://github.com/yangzongzhuan/RuoYi-Vue3
本文介绍使用若依提供的在线后端接口,仅启动前端项目并进行界面开发,而无需启动后端服务。

一、克隆项目仓库

首先,克隆 RuoYi-Vue3 项目仓库:

git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

二、编译与运行

1. 安装依赖

进入项目目录,并使用 npm 安装所需依赖:

npm install --registry=https://registry.npmmirror.com

2. 配置修改

在 .env.development 文件中进行如下配置调整:

# 页面标题
VITE_APP_TITLE = 若依管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 若依管理系统/开发环境
VITE_APP_BASE_API = 'http://vue.ruoyi.vip/prod-api'

 

3. 启动项目

运行以下命令启动开发服务器:

npm run dev

三、效果展示

项目成功启动后,您将会看到如下界面:

通过上述步骤,您可以在不启动后端服务的情况下,使用若依提供的在线后端接口进行前端开发和界面调整。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/899869.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue笔记-浏览器窗口改变时,重新计算表格高度并设置

当窗口大小改变时,你监听 window 对象的 resize 事件,然后在事件处理程序中重新计算表格的高度。在 Vue 中,可以在组件中通过 created 生命周期钩子来添加事件监听器,然后在组件销毁时移除事件监听器。 如下vue代码: …

33 类与对象 · 下

目录 一、构造函数的深入 (一)构造函数的其他特点 (二)使用例 1、Date类与Time类显示写 2、Date类与Time类写一部分 (三)总结 (四)初始化顺序小题目 二、类型转化 &#xff…

Linux Redis查询key与移除日常操作

维护老项目Express node 编写的后端程序、有这么一个方法、没有设置redis过期时间(建议设置过期时间,毕竟登录生产服务器并不是每个人都有权限登录的!!!)。如果变动只能通过登录生产服务器、手动修改… 于…

@Autowired和@Resource的用法与区别

前言: Autowired 和 Resource 来自不同的“父类”,其中 Autowired 是 Spring 定义的注解,而 Resource 是 Java 定义的注解,它来自于 JSR-250(Java 250 规范提案)。当它们的实现类只有一个时,那…

github pages + hugo 搭建静态博客网站

体验地址 1. 起因, 目的: 其实6年前,我就写过这个。 项目代码 博客地址 最近想改写一下。 github 推荐的主题是 Jekyll, 我当时用的就是这个,感觉很麻烦。尤其是文章命名。 新的主题 hugo 用起来还行。 2.过程: 过程记录&am…

代码随想录算法训练营第六天|454四数相加II、 383赎金信、15三数之和、18四数之和

day06 1. 454四数相加II 首先定义 一个unordered_map,key放a和b两数之和,value 放a和b两数之和出现的次数。遍历大A和大B数组,统计两个数组元素之和,和出现的次数,放到map中。定义int变量count,用来统计 …

新电脑Win11家庭中文版跳过联网激活方法(教程)

预装Win11家庭中文版的新电脑,如何跳过联网激活;由于微软限制必须要联网激活,需要使用已有的微软账户登入或者注册新的微软账户后才可以继续开机使用,Win11联网后系统会自动激活。下面介绍一下初次开机初始化电脑时如何跳过联网激…

虚拟滚动列表如何实现?

highlight: a11y-dark 虚拟滚动列表&#xff0c;虚拟滚动的关键在于只渲染当前视口内可见的数据项&#xff0c;而不是一次性渲染所有数据项。这可以显著提高性能&#xff0c;尤其是在处理大量数据时。 以下是一个完整的虚拟滚动列表的示例代码&#xff1a; <!DOCTYPE htm…

RFC2616 超文本传输协议 HTTP/1.1

一、URL-俗称“网址” HTTP 使用 URL(Uniform Resource Locator&#xff0c;统一资源定位符)来定位资源&#xff0c;它是 URI(Uniform Resource Identifier&#xff0c;统一资源标识符)的子集&#xff0c;URL 在 URI 的基础上增加了定位能力 URI 除了包含 URL&#xff0c;还包…

ADC的交流参数

ADC的交流参数是衡量其在处理交流信号时性能的关键指标。一般包括&#xff1a; 1 信噪比&#xff08;Signal-to-Noise Ratio, SNR&#xff09; 这是衡量ADC输出信号中有用信号与噪声水平的比值。信噪比越高&#xff0c;表示ADC的性能越好。 SNR (dB) MaxRMSSignal / RMSNoise…

【你也能从零基础学会网站开发】 SQL Server结构化查询语言数据操作应用--DML篇 select语句数据查询操作详解 今天干货满满!《1024特别篇》

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 select查询语句…

百度ocr服务自动实现文字识别、图片识别功能

百度ocr服务个人注册使用 介绍一个百度免费的ocr服务&#xff0c;通过调用SDK实现文字、图片识别等功能 1. 复制地址到自己的浏览器打开 https://cloud.baidu.com/doc/OCR/index.html2. 选择【登录】 3. 使用【短信登录】 4. 登录后需要选择【个人刷脸实名认证】 百度官方网…

第5.2章|25考研复试综合素质面试最常见问题50问【附上完整答案】超详细考研机械复试面试经验总结全流程 考研复试调剂问题看这一篇就够了!

接着上一章节的内容我们继续完善这50问的题目。上章节的内容参考这个文章。 第5.1章|25考研复试综合素质面试最常见问题50问【附上完整答案】超详细考研复试面试经验总结全流程 考研复试问题看这一篇就够了!考研复试调剂面试问题-CSDN博客https://blog.csdn.net/weixin_56510…

Linux基础命令(六)之 cut,sort,uniq,tr

目录 一&#xff0c;切割显示cut 参数及其作用 常见用法 二&#xff0c;排序显示sort 参数及其作用 常见用法 三&#xff0c;去重显示uniq 常见用法 四&#xff0c;替换文件中的字符显示tr 参数及其作用 常见用法 一&#xff0c;切割显示cut 用于按列提取文本内容 语…

Redis学习笔记(三)--Redis客户端

文章目录 一、命令行客户端二、图形界面客户端1、Redis Desktop Manager2、RedisPlus 三、java代码客户端 本文参考&#xff1a; Redis学习汇总&#xff08;已完结&#xff09; Redis超详细入门教程&#xff08;基础篇&#xff09; Redis视频从入门到高级&#xff0c;redis视频…

Text实现美团部分样式

Text基础 首先是Text的相关基础。 https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text-0000001815927600 Text是显示一段文本的组件。 可以包含Span、ImageSpan、SymbolSpan和ContainerSpan子组件。 接口 Text(content?: string | …

基于SpringBoot设计模式之结构型设计模式·桥接模式

文章目录 介绍开始架构图定义类的功能定义类的实现 测试样例 总结 介绍 将抽象部分与它的实现部分分离&#xff0c;使他们都可以独立地发生变化。 Bridge的意思是桥梁。就像在现实世界中&#xff0c;桥梁的功能是将河流的两侧连接起来一样, Bridge模式的作用也是将两样东西连接…

西南大学的计算机怎么样?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 西南大学计算机学院2024届考研呈现"背道而驰"的走势&#xff0c;学硕(计算机科学与技术)分数线大幅提升23分至333分&#xff0c;而专硕(电子信息)分数线大幅下降30分至300分。学硕实际录取36人&#xff0c;复…

安装vue发生异常:npm ERR! the command again as root/Administrator.

一、异常 npm ERR! The operation was rejected by your operating system. npm ERR! Its possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might b…

AI创作3款软件分享,助力内容创作者高效产出优质作品

为了增加创造力和作品质量&#xff0c;许多创作者开始利用人工智能辅助工具。这些工具不仅可以帮助我们迅速生成各种类型的内容&#xff0c;例如文章、绘画、视频广告等&#xff0c;还提供语法检查和优化建议等实用功能。本文将向大家推荐三款适用于Ai先行者、Tracup、Adoe Fir…