Vue Material Admin 项目安装与配置指南

Vue Material Admin 项目安装与配置指南

1. 项目基础介绍

Vue Material Admin 是一个基于 Vue3、Vuetify、TypeScript 的开源中后台系统模板。该项目采用了 Nest.js 作为后端框架，并且结合了 MySQL 和 TypeORM 进行数据管理。项目遵循 Material Design 设计规范，提供了一套简洁、轻量化的中后台管理界面。它适用于学习、功能展示以及作为生产环境项目的启动模板。

2. 项目使用的关键技术和框架

• 前端:
  • 框架: Vue3
  • 状态管理: Pinia
  • UI 组件库: Vuetify
• 后端:
  • 框架: Nest.js
  • 数据库: MySQL + TypeORM
  • 缓存: Redis

3. 项目安装和配置的准备工作

在开始安装之前，请确保您的开发环境中已安装以下工具：

• Node.js: 建议 Node.js 版本为 18/20，因为项目依赖的 Vite 不支持更低的 Node.js 版本。
• Git: 用于克隆项目代码。
• pnpm: 项目推荐使用的包管理工具。

如果您的环境中没有安装这些工具，请先进行安装。

详细安装步骤

步骤 1: 克隆项目

首先，使用 Git 克隆项目到本地：

git clone https://github.com/armomu/vue-material-admin.git

步骤 2: 安装依赖

进入项目目录，并使用 pnpm 安装项目依赖：

cd vue-material-admin
pnpm install

步骤 3: 配置开发环境

项目默认使用 Apifox 作为接口模拟工具，您需要在 .env.development 文件中配置接口服务器地址：

VITE_API = https://apifoxmock.com/m1/5061937-4723200-default

如果需要连接到本地服务端进行开发，请将 VITE_API 配置为本地服务端地址：

VITE_API = http://localhost:8085

步骤 4: 启动开发环境

在完成环境配置后，启动开发环境：

pnpm run dev

此时，项目将在本地启动一个开发服务器，并且通常会在默认的网络浏览器中打开一个新标签页，显示项目的界面。

步骤 5: 连接后端服务（可选）

如果需要连接后端服务进行开发，请确保后端服务已经在 Serve 分支上配置好，并且正在运行。然后，您可以按照上述步骤 3 中的说明，将前端配置为指向后端服务的地址。

至此，Vue Material Admin 的基本安装和配置就完成了。您可以开始进行前端开发，或与后端服务一起开发。