【Vue2 / Vue 3】一个适配手机、平板、PC 的后台模板，开源且免费！

type

status

date

slug

summary

项目简介

avue-cli 是一个基于 Vue2/Vue3、Element-UI 和 Avue 开发的后台管理系统模板。它采用了最新的前端技术栈，旨在提供一个便捷、高效的开发环境，帮助开发者快速构建响应式、多终端适配的后台管理系统。

项目特点

1. 响应式布局：适配手机、平板、PC 等多终端设备。

2. 现代化技术栈：基于 Vue3、Vite、Element Plus、Vue Router 和 Vuex。

3. 模块化设计：代码结构清晰，易于维护和扩展。

4. 开源免费：基于 MIT 许可，完全免费使用。

项目在线预览

仓库地址

在线文档

数据大屏在线预览

搭建步骤

以下是详细的搭建步骤，帮助你快速上手 avue-cli 项目。

前置条件

Node.js (建议使用 16.x 版本)

IDE（如 VS Code）

包管理工具 npm 或 yarn

第一步：克隆项目

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

第二步：安装依赖

或者使用 yarn：

第三步：启动项目

安装完成后，启动开发服务器：

或者使用 yarn：

浏览器会自动打开并访问 http://localhost:3000，你将看到 avue-cli 的登录界面。

功能展示

avue-cli 提供了丰富的功能，以下是一些主要特性：

登录/注销

支持用户名登录、验证码登录、第三方登录（QQ、微信）、人脸识别登录。

数据大屏设计

大屏管理，大屏分类，数据源，数据集，组件库等功能。

响应式设计

全屏幕尺寸适配，保证在不同设备上的用户体验。

主题和国际化

支持多种主题和国际化设置，满足不同用户的需求。

错误日志和监控

全新的前端错误日志监控机制，帮助开发者及时发现和解决问题。

内嵌页面

支持内嵌页面和外链页面，扩展更方便。

使用体验

在使用 avue-cli 的过程中，我深刻体会到了它的便捷和高效。以下是我的一些使用心得：

1. 快速上手：avue-cli 的项目结构清晰，配置简单，即使是新手也能快速上手。

2. 高效开发：现代化的技术栈和丰富的功能组件，大大提高了开发效率。

3. 灵活定制：模块化设计使得功能扩展和定制变得非常简单，根据业务需求调整代码更加便捷。

4. 社区支持：Gitee 上有活跃的社区，遇到问题可以及时得到帮助和解决方案。

总结

avue-cli 是一款优秀的后台管理模板，适合需要快速搭建响应式、多终端适配后台管理系统的开发者。它不仅功能强大、设计美观，而且完全开源免费。

对于希望提高开发效率和代码质量的程序员来说，avue-cli 无疑是一个理想的选择。