目的

1. 为ApiHug 寻找一个前端解决方案
2. 前端背景知识缺乏
3. 整盘操作：前后全栈
4. 80% 中小规模项目提效 30% +
5. 全员全栈
6. 快速构建
7. 高度模块化
8. AI Native
9. ...

所以

1. 裸学前端
2. 高举高打，直接从复杂项目拆解
3. AI 助手高度依赖
4. 后端癖严重，高度模块， 结构化，架构
5. 边学变搞此系列文章纯粹笔记目的两个： 记录过程 + 督促勿半途而弃

筹备

1. js 基本知识：熟练
2. css: 知晓
3. vue: 知晓

首先前端解决方案现在其实非常成熟， 但是即便如此，还是给他们分门别类， 不同分类解决方案有差别， 从最容易得入手：

先从后端 admin 管理框架入手， 参考了很多家方案， 有 jhipster ，有各种 ***-admin, 部分 star 很多但是有点偏老， 部分太庞大耦合太高，无从下手， 选了个架构比较新， 还灭有长到那么复杂的框架做为分析对象：

Vben AdminVben Admin & 企业级管理系统框架https://doc.vben.pro/分10期还是50期不知道， 变走边看把， 先：

1. 跑通他们的 demo 
2. 然后根据文档拆
3. 分析代码可以 cursor  + gpt (apismart)

下面文章，大部分是我使用 apismart 对接 gpt-4o 解释的结果！

ApiSmart Api design Copilot - ApiHugApiSmart make your api design and implement happierhttps://apihug.com/zhCN-docs/copilot

001 Internal - vite-config

涵盖信息：

1. vite 配置
2. vite 插件
3. 环境变量

谁使用？ 你项目的 vite.config.mts 一般引用到这个包， 方便快速定义啦：

import { defineConfig } from '@vben/vite-config';export default defineConfig(async () => {return {application: {archiver: false},vite: {server: {proxy: {'/api': {changeOrigin: true,rewrite: (path) => path.replace(/^\\/api/, ''),// mock代理目标地址target: '<http://localhost:5320/api>',ws: true,},},},},};
});

配置

内置了两种，一种是 application 一种是 library, 如果有 index.html 默认就是 application 模式， library 这里不分析；

Application

https://github.com/vbenjs/vue-vben-admin/blob/main/internal/vite-config/src/config/application.ts

效果和一般意义上的 vite-config.mjs 一个效果，就是 vite 编译的配置。

概述

这段代码定义了一个函数 defineApplicationConfig，用于配置 Vite 应用程序的构建和开发环境。它通过合并用户配置、环境变量和插件来生成最终的 Vite 配置。

关键组件

1. 导入：
   • 代码导入了 Vite 的类型和函数，以及一些自定义模块和实用工具。
   • 它还使用了 Node.js 的 path 模块来处理文件路径。
2. defineApplicationConfig 函数：
   • 这是一个主函数，用于定义应用程序的配置。
   • 它接受一个可选的 userConfigPromise 参数，这是一个返回用户配置的 Promise。
3. 加载配置和环境：
   • 使用 loadAndConvertEnv 函数加载和转换环境变量。
   • 使用 loadEnv 函数根据当前模式加载环境变量。
4. 插件加载：
   • 使用 loadApplicationPlugins 函数加载应用程序所需的插件。
   • 插件配置包括压缩、国际化、PWA 支持等。
5. 应用程序配置：
   • 定义了 Vite 的基本配置，包括构建选项、CSS 选项、ESBuild 配置、插件和服务器配置。
   • 构建选项指定了输出文件的命名规则和目标 ECMAScript 版本。
   • CSS 选项通过 createCssOptions 函数生成，允许注入全局 SCSS 样式。
6. 合并配置：
   • 使用 mergeConfig 函数合并通用配置和应用程序配置，生成最终的 Vite 配置。
7. createCssOptions 函数：
   • 生成 CSS 预处理器选项。
   • 如果 injectGlobalScss 为 true，则为 SCSS 文件注入全局样式。

示例用法

假设你有一个用户配置函数 userConfig，你可以这样使用 defineApplicationConfig：

import { defineApplicationConfig } from './application';const userConfig = async (config) => {return {application: {appTitle: 'My App',base: '/',port: 3000,},vite: {// 其他 Vite 配置},};
};export default defineApplicationConfig(userConfig);

总结

defineApplicationConfig 函数是一个用于配置 Vite 应用程序的工具。它通过合并用户配置、环境变量和插件来生成一个完整的 Vite 配置，支持构建和开发环境的各种需求。

Plugins

被 Application 初始化时候加载， 也是根据配置，是否需要加载对应的 plugin

概述

这段代码定义了一组函数，用于根据不同的条件加载 Vite 插件。Vite 是一个用于构建现代 Web 应用程序的工具，这些插件可以扩展 Vite 的功能，比如支持 Vue、国际化、PWA、压缩等。

关键组件

1. 导入：
   • 代码导入了 Vite 插件的类型和一些具体的插件。
   • 还导入了一些自定义插件模块。
2. loadConditionPlugins 函数：
   • 接受一个条件插件数组 conditionPlugins。
   • 遍历每个条件插件，如果条件为真，则加载相应的插件。
3. loadCommonPlugins 函数：
   • 根据通用选项加载常用的 Vite 插件。
   • 包括 Vue 支持、Vue JSX 支持、开发工具、元数据注入和可视化工具。
4. loadApplicationPlugins 函数：
   • 根据应用程序选项加载特定的 Vite 插件。
   • 支持的功能包括国际化、打印信息、懒加载表格、模拟数据、应用加载注入、许可证、PWA 支持、压缩、HTML 插件、导入映射、额外的应用配置和归档。
5. loadLibraryPlugins 函数：
   • 根据库选项加载特定的 Vite 插件。
   • 支持的功能包括生成类型声明文件（dts）。
6. 插件条件：
   • 每个插件都有一个条件，只有在条件为真时才会加载该插件。
   • 例如，isBuild 用于判断当前是否为构建模式，compress 用于判断是否需要压缩。

示例用法

假设你有一个应用程序配置对象 appOptions，你可以这样使用 loadApplicationPlugins：

import { loadApplicationPlugins } from './index';const appOptions = {isBuild: true,env: process.env.NODE_ENV,i18n: true,compress: true,compressTypes: ['gzip'],// 其他选项...
};loadApplicationPlugins(appOptions).then((plugins) => {console.log('Loaded plugins:', plugins);
});

总结

这段代码提供了一种灵活的方式来根据不同的条件加载 Vite 插件。通过这种方式，你可以根据开发或生产环境的不同需求，动态地配置和扩展 Vite 的功能。