Zs Admin

Appearance

安装运行 ​

本章节将详细介绍 ZsAdmin 前端项目的安装、运行、构建和部署过程，帮助您快速上手项目开发。

1. 环境要求 ​

在安装和运行 ZsAdmin 前端之前，请确保您的环境满足以下要求：

环境版本要求说明
Node.js18+JavaScript 运行环境，推荐使用 LTS 版本
pnpm8+包管理工具，推荐使用，也可以使用 npm 或 yarn
Git2+版本控制工具
IDEVS Code（推荐）代码编辑器

2. 安装步骤 ​

2.1 克隆项目 ​

首先，您需要从 Git 仓库克隆项目代码：

bash
# 使用 GitHub 克隆
git clone https://github.com/zsadmin2025/zs-ui-acro-design

# 或使用 Gitee 克隆
git clone https://gitee.com/zsadmin2025/zs-ui-acro-design

# 进入项目目录
cd zs-ui-acro-design

2.2 安装依赖 ​

项目使用 pnpm 作为包管理工具，推荐使用 pnpm 安装依赖：

bash
# 使用 pnpm 安装依赖（推荐）
pnpm install

# 或使用 npm 安装依赖
npm install

# 或使用 yarn 安装依赖
yarn install

2.3 配置环境变量 ​

根据您的开发环境，配置相应的环境变量。项目提供了不同环境的配置文件：

配置文件环境说明
.env.development开发环境本地开发使用
.env.test测试环境测试服务器使用
.env.production生产环境生产服务器使用

您可以根据需要修改这些配置文件，设置 API 地址、端口等环境变量：

dotenv
# API 基础地址
VITE_API_BASE_URL = 'http://localhost:8080'

3. 开发服务器 ​

3.1 启动开发服务器 ​

使用以下命令启动开发服务器：

bash
# 启动开发服务器
pnpm run dev

# 或使用 npm
npm run dev

# 或使用 yarn
yarn run dev

开发服务器启动成功后，您可以通过以下地址访问应用：

http://localhost:5173

3.2 代码热更新 ​

开发服务器支持代码热更新，当您修改代码后，浏览器会自动刷新，无需手动刷新页面。

4. 构建生产版本 ​

4.1 构建生产版本 ​

使用以下命令构建生产版本：

bash
# 构建生产版本
pnpm run build:prod

# 或使用 npm
npm run build:prod

# 或使用 yarn
yarn run build:prod

构建成功后，会在 dist 目录下生成生产版本的代码。

4.2 构建开发版本 ​

如果您需要构建开发版本用于测试，可以使用以下命令：

bash
# 构建开发版本
pnpm run build

# 或使用 npm
npm run build

# 或使用 yarn
yarn run build

5. 预览生产版本 ​

5.1 预览生产版本 ​

使用以下命令预览生产版本：

bash
# 预览生产版本
pnpm run preview

# 或使用 npm
npm run preview

# 或使用 yarn
yarn run preview

预览服务器启动成功后，您可以通过以下地址访问应用：

http://localhost:4173

6. 代码质量检查 ​

6.1 运行 ESLint ​

使用以下命令运行 ESLint 检查代码质量：

bash
# 运行 ESLint
pnpm lint

# 或使用 npm
npm run lint

# 或使用 yarn
yarn lint

6.2 自动修复 ESLint 错误 ​

使用以下命令自动修复 ESLint 错误：

bash
# 自动修复 ESLint 错误
pnpm lint-fix

# 或使用 npm
npm run lint-fix

# 或使用 yarn
yarn lint-fix

6.3 运行 TypeScript 类型检查 ​

使用以下命令运行 TypeScript 类型检查：

bash
# 运行 TypeScript 类型检查
pnpm type:check

# 或使用 npm
npm run type:check

# 或使用 yarn
yarn type:check

7. 开发工具配置 ​

7.1 VS Code 插件推荐 ​

插件名称插件说明
VolarVue 3 开发必备插件，提供语法高亮、智能提示等功能
ESLint代码质量检查工具
Prettier代码格式化工具
TypeScript Vue PluginTypeScript 支持插件
Vue DevToolsVue 开发者工具，用于调试 Vue 应用
Auto Rename Tag自动重命名 HTML 标签
Path Intellisense路径自动补全
GitLensGit 增强插件