1. 前端框架vben源码下载和启动

下载管理后台 vue-vben-admin 前端框架代码：https://github.com/vbenjs/vue-vben-admin.git
安装 pnpm：npm install -g pnpm

注意点：为什么这里不能用 npm install 来安装项目依赖？
1、preinstall 脚本的限制，另外项目使用了 turbo 和 workspace:* 依赖（这里的 workspace:* 是表示直接引用本地工作区（workspace）内的其他子包，而不是从远程 npm 仓库下载）。

2、本地 node 和 pnpm的版本问题，项目声明了必须使用 pnpm@10.12.4。

3、包含 pnpm 特有的配置块（如 pnpm.overrides、pnpm.peerDependencyRules），这些配置对 npm 无效，可能导致依赖解析失败。

使用 VS Code 打开框架项目，安装项目依赖：pnpm install
运行项目：npm run dev

运行效果

2. vben三种运行模式

npm run dev 开发阶段：启动开发服务器。特点是启动快，加载慢（代码未打包，运行时构建，边运行边构建导致加载很慢）。
npm run preview 部署前测试：先构建生成生成 dist/ 目录，再基于 dist/ 运行（build + preview），模拟线上环境。特点是启动慢，加载快。
npm run build 正式发布：构建生产环境代码，build 后上传 dist/ 到服务器。

3. vben项目发布方法

将项目发布到服务器的指定目录下：修改项目配置，设置基本路径。

4. es module特性支持

/// utils.js
export function myLog() {
  console.log('myLog');
}

/// test.js
import { myLog } from "./utils";
// 调用工具类方法
myLog();

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 使用 type="module" 声明该脚本为 ES 模块 -->
  <script type="module" src="./test.js"></script>
</body>
</html>

说明：<script type="module"> 表示这个 <script> 标签加载的是一个 ES 模块（ESM，支持 import/export，可以导入/导出其他模块），而不是传统的脚本（全局作用域）。它的核心作用是启用现代 JavaScript 的模块化功能。

解析：
ESM 和 CommonJS 是什么？
ESM（ES Modules）和 CommonJS（CJS）是 JavaScript 的两种模块系统，用于组织和管理代码。它们的主要区别： ESM 是使用 import / export 语法来导入/导出模块代码（现代标准，更推荐使用）。CJS 是使用 require() / module.exports 语法来导入/导出模块代码。

使用 ESM 模块系统的3种声明方式？
1、看项目配置：在 package.json 中设置了 "type": "module"，Vite 会将其视为 ESM；否则可能视为 CommonJS。
2、看文件扩展名：.mts (TypeScript 的 ESM 专用扩展，显式声明为 ES 模块)
3、<script type="module"> 通过 type="module" 声明让浏览器以 ES Modules (ESM) 方式加载 test.js，支持 import/export 语法，具有模块作用域。

5. Mock

在 Vue3 开发中，Mock 是一种模拟后端接口数据的技术，用于前端开发者在后端服务尚未完成时，能够独立进行前端开发和测试。它的核心作用是拦截前端发出的 API 请求，并返回预设的模拟数据，从而避免阻塞开发进度。

【管理后台】前端框架搭建 vue-vben-admin