项目前端架构与基础框架选择：Vue优势与技术栈详解.pdfVIP

01.项目前端架构

LLMOps项目的前端部分包含了视图层、编译层、代码层和数据层4个部分。

1.视图层：涵盖浏览器和业务模块，主要功能是将用户选择的web资源，通过解析网

页源文件进行显示，并展示出不同的模块。

2.编译层：编译层分析项目结构，根据文件找到JavaScript模块及其它浏览器不

能直接运行的拓展语言（如TypeScript、SCSS等），通过Vite将源代码编译成适合

浏览器使用的格式。

3.代码层：在代码层，每个独立的可视或可交互区域都视为一个组件，并将所需的各

种资源集中在组件目录下。Vue-router用于页面路径和组件的映射，Pinia集中

管理应用状态，UI组件库提高界面设计效率，util文件夹则管理全局工具。

4.数据层：数据层包括Service模块，负责业务逻辑的独立性和重用性；Network模块，

查看网络请求的内容；以及Api模块，通过fetch请求从后端接口获取所需数据。

项目技术架构图如下

02.项目技术选型

选定一个前端框架时，我们需要考虑的因素有：

•框