vue-pure-admin:一款基于Vue3和Vite的现代化后台管理系统模板

科技   教育   2024-09-12 00:00   广东  


一、引言

在当今前端技术日新月异的时代,选择一个合适的后台管理系统模板对于项目的成功至关重要。vue-pure-admin正是一款基于最新技术栈,旨在提供高效、稳定且易于扩展的解决方案的后台管理系统模板。本文将详细介绍vue-pure-admin的技术特点、研发理念以及如何使用精简版本进行实际项目开发。

二、技术栈概述
vue-pure-admin完全采用ECMAScript模块(ESM)规范编写和组织代码,充分利用了Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等主流技术的优势。这些技术的结合使得vue-pure-admin在性能、开发效率和用户体验上都表现出色。
  • Vue3:作为最新版本的Vue框架,Vue3带来了Composition API、更好的性能以及更小的体积。
  • Vite:一款由Vue团队开发的新型前端构建工具,提供了极快的冷启动、即时的模块热更新等特性。
  • Element-Plus:基于Vue3的桌面端组件库,为开发者提供了丰富的UI组件。
  • TypeScript:JavaScript的超集,为JavaScript提供了类型系统和对ES6+的支持。
  • Pinia:Vue的官方状态管理库,自Vue3发布后成为Vuex的替代品。
  • Tailwindcss:一款功能强大的CSS框架,允许开发者通过类名快速应用样式。
研发理念
vue-pure-admin的研发理念是“稳定中求创新,技术中见未来”。这意味着在保持系统稳定性的基础上,不断追求技术创新和前瞻性。通过采用最新的技术栈和最佳实践,vue-pure-admin致力于为开发者提供一个既稳定又高效的后台管理系统模板。
精简版本介绍
为了满足实际项目开发的需求,vue-pure-admin提供了精简版本。精简版本是基于vue-pure-admin提炼出的架子,包含了主体功能,更适合实际项目开发。其打包后的大小在全局引入Element-Plus的情况下仍然低于2.3MB,并且会永久同步完整版的代码。通过开启brotli压缩和cdn替换本地库模式,打包大小可以进一步降低到低于350kb,这对于需要优化加载速度和性能的项目来说是一个巨大的优势。

三、安装使用

拉取代码

推荐使用 @pureadmin/cli 脚手架


  1. 全局安装
npm install -g @pureadmin/cli
  1. 交互式选择模板并创建项目
pure create
点我查看 @pureadmin/cli 脚手架详细用法

从 GitHub 上拉取

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

从 Gitee 上拉取

git clone https://gitee.com/yiming_chang/vue-pure-admin.git

安装依赖

cd vue-pure-admin

pnpm install

启动平台

pnpm dev

项目打包

pnpm build

Docker 支持

  1. 自定义镜像名为 vue-pure-admin 的镜像(请注意下面命令末尾有一个点 . 表示使用当前路径下的 Dockerfile 文件,可根据实际情况指定路径)
docker build -t vue-pure-admin .
  1. 端口映射并启动 docker 容器(8080:80:表示在容器中使用 80 端口,并将该端口转发到主机的 8080 端口;pure-admin:表示自定义容器名;vue-pure-admin:表示自定义镜像名)
docker run -dp 8080:80 --name pure-admin vue-pure-admin
操作完上面两个命令后,在浏览器打开 http://localhost:8080 即可预览
当然也可以通过 Docker Desktop 可视化界面去操作 docker 项目,如下图

四、部分截图

五、结论
vue-pure-admin是一款基于Vue3和Vite的现代化后台管理系统模板,它充分利用了最新技术的优势,为开发者提供了一个高效、稳定且易于扩展的解决方案。无论是对于想要快速搭建后台管理系统的开发者,还是对于追求技术创新和前瞻性的团队来说,vue-pure-admin都是一个值得考虑的选择。通过其精简版本,开发者可以更加专注于业务逻辑的实现,而不必担心底层技术的复杂性。

项目地址:
https://gitee.com/yiming_chang/vue-pure-admin
项目文档:
https://pure-admin.github.io/pure-admin-doc/


前端技术交流群:






前端组件开发
专注开发和分享前后端组件以及开源前后端框架,以此来提高前后端技术开发的效率。全网有10w+前端伙伴,打造互联网产品渠道平台。
 最新文章