【亲测免费】 vue-pure-admin 精简版安装和配置指南

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

项目基础介绍

vue-pure-admin-thin 是 vue-pure-admin 的精简版，专为实际项目开发设计。它包含了主体功能，打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB。该项目会永久同步完整版的代码，开启 brotli 压缩和 cdn 替换本地库模式后，打包大小低于 350kb。

主要编程语言

该项目主要使用以下编程语言和框架：

• TypeScript
• Vue
• SCSS
• JavaScript
• HTML

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

关键技术和框架

• Vue 3：用于构建用户界面的渐进式框架。
• Element Plus：基于 Vue 3 的组件库，提供丰富的 UI 组件。
• Vite：新一代前端构建工具，提供快速的开发体验。
• TypeScript：强类型编程语言，增强代码的健壮性和可维护性。
• SCSS：CSS 预处理器，提供更强大的样式编写能力。

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

准备工作

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

• Node.js（建议版本：14.x 或更高）
• npm 或 yarn（建议使用 yarn，因为它在处理依赖时更快）

详细安装步骤

步骤 1：克隆项目

首先，您需要从 GitHub 克隆 vue-pure-admin-thin 项目到本地。

git clone https://github.com/pure-admin/pure-admin-thin.git

步骤 2：进入项目目录

克隆完成后，进入项目的根目录。

cd pure-admin-thin

步骤 3：安装依赖

使用 yarn 或 npm 安装项目所需的依赖。

yarn install

或

npm install

步骤 4：启动开发服务器

安装完成后，您可以启动开发服务器，开始开发。

yarn dev

或

npm run dev

步骤 5：构建项目

当您完成开发并准备发布时，可以使用以下命令构建项目。

yarn build

或

npm run build

步骤 6：查看构建结果

构建完成后，您可以在 dist 目录下找到构建好的文件，这些文件可以部署到您的服务器上。

配置文件说明

项目中包含多个配置文件，以下是一些关键配置文件的说明：

• .env：环境变量配置文件，包含开发、生产和测试环境的配置。
• vite.config.ts：Vite 配置文件，用于配置构建和开发服务器。
• tailwind.config.ts：Tailwind CSS 配置文件，用于自定义样式。

常见问题

• 依赖安装失败：请确保您的网络连接正常，或者使用国内的 npm 镜像源。
• 启动失败：检查 Node.js 版本是否符合要求，或者查看控制台输出的错误信息。

通过以上步骤，您应该能够顺利安装和配置 vue-pure-admin-thin 项目，并开始您的开发工作。