Geeker-Admin 安装和配置指南

Geeker-Admin 安装和配置指南

Geeker-Admin HalseySpicy/Geeker-Admin: 是一套基于 Vue3 和 Ant Design Vue 的企业级中后台前端/设计解决方案。适合对 Vue3、企业级前端以及对 Ant Design Vue 有兴趣的开发者。 项目地址: https://gitcode.com/gh_mirrors/ge/Geeker-Admin

1. 项目基础介绍和主要编程语言

项目介绍

Geeker-Admin 是一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的后台管理框架。它使用最新的技术栈开发，提供了强大的 ProTable 组件，旨在提高开发效率。项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。

主要编程语言

• TypeScript: 项目主要使用 TypeScript 进行开发，提供了强类型检查和更好的代码提示。
• JavaScript: 部分配置文件和脚本使用 JavaScript。

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

关键技术和框架

• Vue3.4: 使用 Vue3 的最新版本，提供了更好的性能和更简洁的 API。
• TypeScript: 强类型检查，提高代码质量和可维护性。
• Vite5: 快速的前端构建工具，提供快速的开发体验和高效的打包。
• Pinia: 轻量级的状态管理库，替代 Vuex，简单易用。
• Element-Plus: 基于 Vue3 的 UI 组件库，提供丰富的 UI 组件。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

1. Node.js: 确保你已经安装了 Node.js（建议版本 >= 14.x）。
2. Git: 确保你已经安装了 Git，用于克隆项目代码。
3. 代码编辑器: 推荐使用 VSCode 或其他支持 TypeScript 的编辑器。

详细安装步骤

1. 克隆项目代码

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

git clone https://github.com/HalseySpicy/Geeker-Admin.git

2. 进入项目目录

进入克隆下来的项目目录：

cd Geeker-Admin

3. 安装依赖

使用 pnpm 安装项目依赖（如果没有安装 pnpm，可以使用 npm 或 yarn）：

pnpm install

4. 运行项目

安装完成后，可以运行项目进行开发：

pnpm dev

5. 构建项目

如果需要构建项目，可以使用以下命令：

# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro

6. 代码检查和格式化

项目中集成了 ESLint、Prettier 和 Stylelint，可以使用以下命令进行代码检查和格式化：

# eslint 检测代码
pnpm lint:eslint

# prettier 格式化代码
pnpm lint:prettier

# stylelint 格式化样式
pnpm lint:stylelint

7. 提交代码

在提交代码之前，可以使用以下命令进行代码检查和提交：

# 提交代码（提交前会自动执行 lint:lint-staged 命令）
pnpm commit

总结

通过以上步骤，你可以成功安装和配置 Geeker-Admin 项目，并开始进行开发。项目使用了最新的技术栈，提供了丰富的功能和组件，能够帮助你快速开发后台管理系统。

Geeker-Admin HalseySpicy/Geeker-Admin: 是一套基于 Vue3 和 Ant Design Vue 的企业级中后台前端/设计解决方案。适合对 Vue3、企业级前端以及对 Ant Design Vue 有兴趣的开发者。 项目地址: https://gitcode.com/gh_mirrors/ge/Geeker-Admin