基于Llama Index构建RAG应用(Datawhale AI 夏令营)

bar

前言

Hello,大家好,我是GISer Liu😁,一名热爱AI技术的GIS开发者,本文参与活动是2024 DataWhale AI夏令营;😲

在本文中作者将通过:

  • Gradio、Streamlit和LlamaIndex介绍

  • LlamaIndex 构建RAG应用

  • LlamaIndex 结合 Streamlit 构建RAG Web应用

这三个章节,冲LLM开发的理论基础知识开始学习,尝试软件框架的使用方法,最后通过RAG实践案例帮助读者入门本次AI夏令营的LLM应用开发;一起加油!!!😍😍😍


一、前端框架介绍

1.Gradio

gradio

Gradio 是一个开源的 Python 库,用于快速构建机器学习和数据科学演示应用。它允许开发者通过几行代码创建一个简单、可调整的用户界面,用于展示机器学习模型或数据科学工作流程。Gradio 支持多种输入输出组件,如文本、图片、视频、音频等,并且可以轻松地在互联网上分享和在局域网内分享应用。

整理一下其特点:
gradio_attr

  • 快速开发:Gradio 提供了丰富的预构建组件,可以快速搭建用户界面。

  • 多种输入输出类型:支持文本、图片、视频、音频等多种输入输出类型。

  • 易于分享:可以轻松地将应用分享到互联网或局域网。

  • 集成方便:可以与各种机器学习框架(如 TensorFlow、PyTorch)无缝集成。

Gradio其拥有的功能:

  • 用户界面构建:通过简单的 API 调用创建复杂的用户界面。

  • 实时交互:支持实时交互,用户可以即时看到模型的输出。

  • 组件定制:可以自定义组件的样式和行为。

  • 事件处理:支持按钮点击、输入框变化等事件的处理。

Gradio 提供了多种组件,包括但不限于,下面的案例代码中我会展示细节:

  • 文本框 (Textbox):用于输入和显示文本。
  • 聊天框 (Chatbot):用于显示对话历史。
  • 按钮 (Button):用于触发事件。
  • 图像 (Image):用于输入和显示图像。
  • 滑块 (Slider):用于输入数值。

安装方法:

pip install gradio

应用案例:

import gradio as grdef greet(name, is_morning, temperature, image, audio, file, dropdown, checkbox, slider, number):salutation = "早上好" if is_morning else "晚上好"greeting = f"{salutation} {name}。今天气温是 {temperature} 度。"return greeting, image, audio, file, dropdown, checkbox, slider, numberiface = gr.Interface(fn=greet,  # 定义处理函数inputs=[gr.inputs.Textbox(lines=2, placeholder="在这里输入你的名字..."),  # 文本框gr.inputs.Checkbox(label="现在是早上吗?"),  # 复选框gr.inputs.Number(label="气温"),  # 数字输入框gr.inputs.Image(type="pil"),  # 图像上传gr.inputs.Audio(source="microphone"),  # 音频录制gr.inputs.File(label="上传文件"),  # 文件上传gr.inputs.Dropdown(choices=["选项1", "选项2", "选项3"], label="选择一个选项"),  # 下拉菜单gr.inputs.CheckboxGroup(choices=["A", "B", "C"], label="选择选项"),  # 复选框组gr.inputs.Slider(minimum=0, maximum=100, default=50, label="选择一个值"),  # 滑动条gr.inputs.Number(label="输入一个数字")  # 数字输入框],outputs=[gr.outputs.Textbox(label="问候语"),  # 文本框gr.outputs.Image(label="上传的图像"),  # 图像gr.outputs.Audio(label="录制的音频"),  # 音频gr.outputs.File(label="上传的文件"),  # 文件gr.outputs.Textbox(label="选择的选项"),  # 文本框gr.outputs.Textbox(label="选择的复选框"),  # 文本框gr.outputs.Textbox(label="选择的滑动条值"),  # 文本框gr.outputs.Textbox(label="输入的数字")  # 文本框],title="Gradio 多组件演示",  # 页面标题description="这是一个包含多种输入和输出组件的 Gradio 界面演示。"  # 页面描述
)iface.launch()  # 启动界面

然后我们可以在终端中顺利运行Gradio窗口,我这里的gradio版本是3.10.1:

python3 test.py

gradio_demo


2. Streamlit

streamlit

Streamlit 是一个开源的 Python 库,专门用于快速构建数据科学和机器学习应用的 Web 界面。它允许开发者通过简单的 Python 脚本创建交互式的 Web 应用,无需深入了解 Web 开发技术。Streamlit 提供了丰富的组件和功能,使得数据可视化和模型展示变得简单快捷。

整理一下其特点:

  • 快速开发:Streamlit 提供了简洁的 API,可以快速搭建 Web 界面。

  • 代码驱动:完全基于 Python 脚本,无需 HTML 或 JavaScript。

  • 实时更新:应用会根据代码的更改实时更新。

  • 易于分享:可以轻松地将应用部署到云端或本地服务器。

  • 集成方便:可以与各种数据科学和机器学习框架(如 Pandas、Matplotlib、TensorFlow)无缝集成。
    test

Streamlit 拥有的功能:

  • 数据展示:支持表格、图表、地图等多种数据展示方式。

  • 用户交互:支持按钮、滑块、下拉菜单等交互组件。

  • 组件定制:可以自定义组件的样式和行为。

  • 缓存机制:支持缓存数据和计算结果,提高应用性能。

Streamlit 提供了多种组件,包括但不限于:

  • 文本框 (Text Input):用于输入和显示文本。
  • 按钮 (Button):用于触发事件。
  • 图像 (Image):用于显示图像。
  • 滑块 (Slider):用于输入数值。
  • 下拉菜单 (Selectbox):用于选择选项。

安装方法:

pip install streamlit

应用案例:

import streamlit as st
import pandas as pd
import numpy as npdef main():st.title("Streamlit 多组件演示")st.write("这是一个包含多种输入和输出组件的 Streamlit 界面演示。")name = st.text_input("输入你的名字", "在这里输入你的名字...")is_morning = st.checkbox("现在是早上吗?")temperature = st.number_input("输入气温", min_value=0, max_value=100, value=20)image = st.file_uploader("上传图像", type=["png", "jpg", "jpeg"])audio_file = st.file_uploader("上传音频", type=["wav", "mp3"])file = st.file_uploader("上传文件")dropdown = st.selectbox("选择一个选项", ["选项1", "选项2", "选项3"])checkbox = st.multiselect("选择选项", ["A", "B", "C"])slider = st.slider("选择一个值", 0, 100, 50)number = st.number_input("输入一个数字")if st.button("提交"):salutation = "早上好" if is_morning else "晚上好"greeting = f"{salutation} {name}。今天气温是 {temperature} 度。"st.write(greeting)if image:st.image(image)if audio_file:st.audio(audio_file)if file:st.write("上传的文件:", file)st.write("选择的选项:", dropdown)st.write("选择的复选框:", checkbox)st.write("选择的滑动条值:", slider)st.write("输入的数字:", number)if __name__ == "__main__":main()

然后我们可以在终端中顺利运行 Streamlit 应用:

streamlit run app.py

streamlit_demo


通过以上案例,你可以看到 Streamlit 和 Gradio 都是非常强大的工具,用于快速构建和部署数据科学和机器学习应用的 Web 界面。选择哪一个取决于你的具体需求和偏好。


3.检索增强生成(RAG)

langchain RAG

这里作者引用一下LangChainRAG流程图,并详细解释一下其思路:

为了让LLM可以获取真实实时的信息,来自其他数据库、用户输入、互联网爬取的文本图像数据会通过Embedding模型向量化被存储到向量数据库中,然后每次模型调用时都会先去检索向量数据库,将向量(余弦)相似度最高的检索结果反馈,通过提示词工程包装,输入给LLM,得到较为精准的回答,从而实现长期的记忆 ;下面是典型RAG的重要组成:

  • 索引:用于从源引入数据并对其进行索引的管道。这通常发生在离线状态。
  • 检索和生成:实际的 RAG 链,它在运行时接受用户查询并从索引中检索相关数据,然后将其传递给模型。与问题组合为一个新的提示词,输入给LLM;
索引

vector_index

  • 数据加载:首先我们要从不同的数据格式中读取数据到向量数据库,在langchain中,这通过DocumentLoaders实现;

  • 数据拆分:从不同文件中读取的数据会被拆分为数据块;因为向量数据库会分别计算不同数据块与用户输入的向量相似度,如果数据块拆分过大或者一整块(不拆分),则导致很多不相关的信息也会被检索到,如果数据块拆分的太细,则会导致我们读取到的信息不全,也不合适;因此数据拆分时一定要考虑到实际情况,具体问题具体分析,这样计算向量相似度才有意义;

  • 数据存储:我们说我们读取的文本数据会被Embedding模型经过向量化,转化为向量格式,然后存储到向量数据库中;这样我们才能进行后续的向量相似度计算;本文中篇幅有限,就不描述具体的数学原理了;

检索和生成

retriever & generate

  • 内容检索:根据用户的输入,使用Retriever从向量数据库中检索相关拆分的结果;
  • 内容生成:ChatModel/LLM使用包含问题和检索信息的提示来生成答案;

RAG应用是LLM应用中除了聊天机器人外最有可能落地的应用了!

应用示例

  • 医学咨询:RAG系统先检索相关医学文献,再由LLM生成基于最新研究的回复,提供专业且可靠的医学建议。
  • 法律咨询:在法律咨询中,RAG系统可以检索法律条文和案例,生成详细且准确的法律建议。
  • 简历挑选:在企业招聘过程中,HR通过使用基于企业内网知识库的RAG系统可以从海量简历中自动检索出符合公司业务需求的面试者,并提供的薪资和面试建议。
  • 个人学习:对于个人学习者,可以基于本地化部署的知识库和LLM API和Ollama构建个人知识库RAG系统,更好的检索知识,提高学习效率,避免遗忘;并可以实时接收AI 安排的计划,进行针对性的学习;

二、LlamaIndex 概念及应用

我们知道基于大模型实现RAG系统的方法很多。接下来我们就用一款新的工具来构建属于我们自己的RAG系统。

1.LlamaIndex

llamaindex

概念

LlamaIndex是一个用于将私有数据与公共数据集成到大型语言模型(LLM)中的 AI 框架。它简化了数据导入-索引-查询的过程,为生成式 AI 需求提供了可靠的解决方案。

安装

首先,我们需要安装LlamaIndex的依赖环境:

pip install llama-index
pip install llama-index-embeddings-huggingface
pip install llama-index-embeddings-instructor
pip install llama-index-llms-ollama

组成

  1. 数据连接器:连接现有数据源和数据格式(如 API、PDF 等),并将这些数据转换为 LlamaIndex 可用的格式。
    llama-hub

  2. 数据索引:帮助结构化数据,以便无论是问答还是摘要等需求,都可以使用索引来检索相关信息。

  3. 查询接口:用于输入查询并从 LLM 中获取增强的知识输出。

高层次抽象结构

overview

1. Indexing

Indexing 是一种数据结构,用于快速检索相关上下文。可以将其简单理解为对 “node” 的抽象组织方式。在 LlamaIndex 中存在多种组织 node 的方式。Indexing 将数据存储在 Node 对象(代表原始文档的 chunk )中,并支持额外配置和自动化的 Retriever 接口
index

2. Vector Stores

Vector Stores 负责存储 chunk 的嵌入向量。默认情况下,LlamaIndex 使用一个简单的内存向量存储,非常适合快速实验。这些向量存储可以通过 vector_store.persist() 进行持久化。LlamaIndex 支持多种向量数据库输入。
search

3. Query Engine

Query Engine 是一个通用接口,允许用户对数据提出问题。Query Engine 接收自然语言查询,并通常通过检索器建立在一个或多个 indexing 上。用户可以组合多个 Query Engine 来实现更高级的功能。

功能
  1. 数据连接器:从原生数据源和格式中获取数据,例如API、PDF、SQL等。
  2. 数据索引:将数据结构化成LLM易于使用的中间表示。
  3. 引擎
    • 查询引擎:用于问答(例如RAG管道)。
    • 聊天引擎:用于多轮交互。
  4. 代理:增强型知识工作者,利用简单的助手功能到API集成等工具。
  5. 可观测性/评估集成:进行实验、评估和监控。
与 LangChain 的 RAG 链的区别

LlamaIndexLangChain的RAG链相比,具有以下特点:

  • 模块化LlamaIndex提供了更高的模块化设计,允许用户更灵活地组合和扩展各个组件。
  • 数据连接器:LlamaIndex提供了丰富的数据连接器,支持多种数据源和格式。
  • 可观测性和评估:LlamaIndex内置了完善的可观测性和评估工具,方便用户进行实验和监控。
应用场景

LlamaIndex适用于各种上下文增强应用,包括但不限于:

  • 问答系统(RAG)
  • 聊天机器人
  • 文档理解和数据提取
  • 自主代理
  • 多模态应用
  • 数据微调模型

下面是一个使用 LlamaIndex 实现 RAG 系统的案例:

假设有如下的文件组织:

├── starter.py
└── data└── *.pdf

file

核心代码为:

# 导入需要的模块和类
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader, Settings
from llama_index.embeddings.huggingface import HuggingFaceEmbedding
from llama_index.llms.ollama import Ollama# 1. 使用 SimpleDirectoryReader 加载数据
# SimpleDirectoryReader 是一个简单的目录读取器,能从指定目录中读取所有文件的数据
documents = SimpleDirectoryReader("data").load_data()# 2. 设置嵌入模型为 bge-base
# HuggingFaceEmbedding 是一个嵌入模型类,用于将文本转换为向量表示
# 这里我们使用的是 "BAAI/bge-base-en-v1.5" 模型
Settings.embed_model = HuggingFaceEmbedding(model_name="BAAI/bge-base-en-v1.5")# 3. 使用 Ollama 快速接入大语言模型
# Ollama 是一个模型的快速调用框架
# 这里我们指定使用 "llama3" 模型,并设置请求超时时间为 360 秒
Settings.llm = Ollama(model="llama3", request_timeout=360.0)# 4. 创建一个向量存储索引
# VectorStoreIndex 是一个用于存储和查询向量的索引类
# from_documents 方法是从文档数据创建索引
index = VectorStoreIndex.from_documents(documents)# 5. 将索引转换为查询引擎
# as_query_engine 方法将现有的向量存储索引转换为一个查询引擎
# 查询引擎是一个通用接口,允许您对数据提出问题。
query_engine = index.as_query_engine()# 6. 使用查询引擎进行查询
# query 方法接受一个查询字符串,并返回一个响应对象
# 这里我们查询 "作者小时候做了什么?"
response = query_engine.query("What did the author do growing up?")# 7. 打印查询结果
# 打印从查询引擎返回的响应
print(response)

结果输入如下:
output

相关链接

三、构建LlamaIndex RAG Web应用

这里我们使用IpexLLMEmbedding作为向量嵌入模型,ollama为本地模型,streamlit为前端页面,实现完全本地化;
要使用 IpexLLMEmbedding 作为本地 CPU 模型,请确保安装了 llama-index-embeddings-ipex-llm

pip install llama-index-embeddings-ipex-llm
  • 基于Streamlit构建全本地RAG应用
# test.py
import streamlit as st
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader, Settings
from llama_index.embeddings.ipex_llm import IpexLLMEmbedding
from llama_index.llms.ollama import Ollama
import os# 配置文件上传路径
UPLOAD_DIR = "uploaded_files"
os.makedirs(UPLOAD_DIR, exist_ok=True)# Streamlit 应用标题
st.title("RAG 应用")# 文件上传
uploaded_files = st.file_uploader("上传文件", accept_multiple_files=True)
if uploaded_files:for uploaded_file in uploaded_files:file_path = os.path.join(UPLOAD_DIR, uploaded_file.name)with open(file_path, "wb") as f:f.write(uploaded_file.getbuffer())st.success("文件上传成功!")# 输入查询
query = st.text_input("输入查询")# 加载数据并设置嵌入模型和语言模型
if st.button("执行查询"):# 1. 使用 SimpleDirectoryReader 加载数据documents = SimpleDirectoryReader(UPLOAD_DIR).load_data()# 2. 设置嵌入模型为 IpexLLMEmbeddingSettings.embed_model = IpexLLMEmbedding(model_name="BAAI/bge-large-en-v1.5")# 3. 使用 Ollama 快速接入大语言模型Settings.llm = Ollama(model="llama3", request_timeout=360.0)# 4. 创建一个向量存储索引index = VectorStoreIndex.from_documents(documents)# 5. 将索引转换为查询引擎query_engine = index.as_query_engine()# 6. 使用查询引擎进行查询response = query_engine.query(query)# 7. 打印查询结果st.write("查询结果:")st.write(response)

保存代码后,运行以下命令启动 Streamlit 应用:

streamlit run test.py

这将启动一个本地服务器,并在浏览器中打开应用程序界面,各位读者可以尝试在其中上传文件、输入查询并查看结果。这样,我们就使用了IpexLLMEmbedding 作为本地 CPU 模型来处理文本嵌入。

输入你的问题,点击提交按钮,你会看到一个基于LlamaIndex和Gradio的RAG系统生成的回答。


总结

在本教程中,我们介绍了如何使用Gradio、Streamlit和LlamaIndex构建RAG系统。希望这篇文章能帮助你更好地理解和使用这些工具,构建出属于自己的强大AI应用。如果你有任何问题或建议,欢迎留言讨论!

文章参考

  • Streamlit官方文档
  • Gradio官方文档
  • DeepSeek官方文档
  • LlamaIndex官方文档

项目地址

  • 拓展阅读
  • 专栏文章

thank_watch

如果觉得我的文章对您有帮助,三连+关注便是对我创作的最大鼓励!或者一个star🌟也可以😂.

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【C++题解】1212. 移动数组元素

问题:1212. 移动数组元素 类型:数组找数 题目描述: 在一个不重复的数组中,请将这个数组的最小数和数组第一个数交换,最大数和数组最后一个数交换。 输入: 第一行有一个整数 n ( 5≤n≤100 )…

【C】C语言静态链表转动态链表的技术探讨与实现

引言 在数据结构与算法的学习中,链表作为一种常用的线性表链式存储结构,具有灵活的内存分配和高效的插入删除操作等特点。根据链表在内存中的分配方式,链表可以分为静态链表和动态链表两种。静态链表在创建时预先分配一块连续的内存空间&…

微服务:nacos

Nacos 由Alibaba推出的集成于SpringCloudAlibaba中的一款开源注册中心框架 主要功能: 注册中心 配置管理 nacos的安装和部署 nacos默认访问端口8848 docker pull nacos/nacos-server:1.2.0 docker run --env MODEstandalone --name nacos --restartalways -d -p 8848:8…

Elasticsearch基础(五):使用Kibana Discover探索数据

文章目录 使用Kibana Discover探索数据 一、添加样例数据 二、数据筛选 三、保存搜索 使用Kibana Discover探索数据 一、添加样例数据 登录Kibana。在Kibana主页的通过添加集成开始使用区域,单击试用样例数据。 在更多添加数据的方式页面下方,单击…

idea2019版本创建JavaWeb项目并配置Tomcat步骤

一、创建JavaWeb项目 1.新建项目File->New->Project 2. 选择JavaWeb应用在New Project窗口中选择Java后勾选Java EE中的Web Application后点击next即可 3.设置项目名称后点击finish即可 4.至此项目创建完成,检查文件是否齐全,开始配置Tomcat 二、…

免费的数字孪生平台助力产业创新,让新质生产力概念有据可依

关于新质生产力的概念,在如今传统企业现代化发展中被反复提及。 那到底什么是新质生产力?它与哪些行业存在联系,我们又该使用什么工具来加快新质生产力的发展呢?今天我将介绍一款为发展新质生产力而量身定做的数字孪生工具。 新…

spring ioc的原理

1、控制反转(IOC):对象的创建控制权由程序自身转移到外部(容器) 2、依赖注入(DI):所谓依赖注入,就是由IOC容器在运行期间,动态地将某种依赖关系注入到对象之中。 Spring 中的 IoC 的实现原理就是工厂模式加反射机制。 参考资料…

中职省培丨2024年大数据技术中职教师专业技能培训班企业参观实践圆满结束

7月17日,“2024年大数据技术中职教师专业技能培训班(省培)”参训老师莅临广东泰迪智能科技股份有限公司产教融合实训中心开展企业参观实践。泰迪智能科技董事长张良均、中职业务部总监李振林、中职业务部经理黄炳德、校企合作经理吴桂锋及来自…

SCU(Seat Control Unit,座椅控制单元)

SCU也叫SCM(Seat Control Module) 智能座椅可以支持更多的座椅姿态调节,除了水平、高度、靠背常规调节,还支持旋转、腿托、肩部、侧翼等方向调节来实现舒适坐姿,智能座椅同时支持加热、通风、按摩、记忆、迎宾等功能。…

一款国外开发的高质量WordPress下载站模板主题

5play下载站是由国外站长开发的一款WordPress主题,主题简约大方,为v1.8版本, 该主题模板中包含了上千个应用,登录后台以后只需要简单的三个步骤就可以轻松发布apk文章, 我们只需要在WordPress后台中导入该主题就可以…

Linux系统学习日记——vim操作手册

Vim编辑器是linux下的一个命令行编辑器,类似于我们windows下的记事本。 目录 打开文件 编辑 保存退出 打开文件 打开 hello.c不存在也可以打开,保存时vim会自动创建。 效果 Vim打开时,处于命令模式,即执行命令的模式&#x…

Java的list集合总结

在编程语言中,我们必然少不了存储数据的容器,虽然我们有数组,但是数组是连续的开辟处一块连续的内存空间,我们的数据过大会无法存储完,数据量小,会浪费空间,所以我们需要使用集合存储数据&#…

前端JS特效第46集:js-实现响应式节庆活动砸金蛋效果

js-实现响应式节庆活动砸金蛋效果&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>响应式节庆活动砸金蛋…

redis持久化RDB(仅供自己参考)

&#xff08;1&#xff09;save命令&#xff1a;是直接占用主线程来执行持久化的&#xff08;因为redis是单线程的&#xff0c;如果执行save命令&#xff0c;则其他命令&#xff0c;无论查询还是怎么的都被阻塞了&#xff09; &#xff08;2&#xff09;bgsave命令&#xff1a…

从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程 1.下载Node安装包&#xff0c; 链接 2.双击安装包&#xff0c;选择安装路径&#xff0c;如下&#xff1a; 3.一直点击下一步&#xff0c;直至安装结束即可&#xff1a; 这个时候&#xff0c;node会默认配置好环境变量&#xff0c;并且…

《基于 Kafka + Quartz 实现时限质控方案》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

OpenCv 如何在 Java 中使用

Java 项目引入 OpenCv 环境准备OpenCv介绍下载Maven 安装动态链接库 完成 环境准备 JDK 8 OpenCv 4.0.0 Maven 3.9 Windows 11 OpenCv 介绍 OpenCV&#xff08;开源计算机视觉库&#xff09;是一个功能强大的计算机视觉和机器学习库。它提供了广泛的工具和算法&#xff0c;用…

jquery实现文字点选验证码

jquery实现文字点选验证码 git地址&#xff1a;点击获取源码 一、功能说明&#xff08;文字点选验证码&#xff09; 词组库内存在大量3~6字随机词组&#xff0c;从词组库内随机找出一组词组&#xff0c;随机展现在显示区点击按钮&#xff0c;弹出验证码区域将词组内的随机数量…

4. docker镜像、Dockerfile

docker镜像、Dockerfile 一、docker镜像1、镜像介绍2、镜像核心技术 二、Dockerfile定制镜像1、Dockerfile使用流程1.1 编写Dockerfile1.2、构建镜像1.3 创建容器测试镜像定制操作 2、Dockerfile常用指令 一、docker镜像 1、镜像介绍 分层的文件系统 优势&#xff1a;节省空间…

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件&#xff01;因为这种产品展示信息的模块组件&#xff0c;后面我还会在其他的页面内反复使用到&#xff0c;所以&#xff0c;使用模块化开发的思路&#xff0c;把它单独设计成一个组件&#xff0c;这样可以代码复用。以后在其…