轻松使用 pure-admin 后台管理开源项目

嘚瑟小老太

已于 2024-09-10 13:21:10 修改

阅读量292

点赞数 1

文章标签： vue css 前端框架 vue.js

于 2024-09-09 15:18:15 首次发布

本文链接：https://blog.csdn.net/weixin_50387010/article/details/142059226

版权

1.文档地址

Pure Admin 保姆级文档（已兼容最新版v5.8.0）

2. 开发环境

从 vue-pure-admin v5.0.0 版本后，规定 node 版本应不小于 18.18.0 ，pnpm 版本应不小于 9

安装 pnpm （mac 用户遇到安装报错请在命令前加上 sudo）

npm install -g pnpm

3.安装`脚手架`

//全局安装
npm install -g @pureadmin/cli

4.交互式选择模板并创建项目

pure create

我是直接从从 GitHub 上拉取的（非国际化精简版前端代码）其他版本的可以去文档查看

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

5.安装依赖

pnpm install

6.启动项目

pnpm dev

7.项目打包

pnpm build

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘚瑟小老太

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue-pure-admin:ueVue3.0 + TypeScript + Element-Plus编写的一套后台管理系统（兼容移动端）

04-06

Vue3.0后台管理系统功能已开发完成（兼容移动端），新需求请提 vue版本代码： : vue版本在线地址：http: react版本代码： : angular版本代码： : angular版本在线地址： : 节点接口： : doc文档： : github地址： : gitee地址： ://gitee.com/yiming_chang/CURD-TS 专有地址帮助你获取最新的API [vue3.0中文文档地址]： ://vue3js.cn/docs/zh/ [element-plus中文文档地址]： : [composition-Api中文文档地址]： : [vue-router-next文档地址]： : [next.vuex文档地址]： ://next.vuex.vuejs.org/ [vite源码]： : [vite文档地址]：

vue-pure-admin

10-10

Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端） vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.

参与评论您还未登录，请先登录后发表或查看评论

pure-admin

m0_47999208的博客

03-27

750

vue-pure-admin: 🔥 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）

Pure Admin - 基于 Vue3 / Vite / Pinia 等主流技术栈打造的免费开源中后台管理系统，包含前后端源码

那些免费的砖

02-27

1万+

功能很强大、安装很小巧的免费截图、录屏工具，提供很多使用的工具来帮我么能解决问题，推荐给大家。

vue-pure-admin项目的学习

热门推荐

weixin_41897680的博客

11-17

1万+

前言感谢作者的开源，让我们有机会学习项目地址： vue-pure-admin

探索PureAdmin：一个简洁高效的后台管理系统模板

gitblog_00094的博客

04-06

708

探索PureAdmin：一个简洁高效的后台管理系统模板 PureAdmin基于Vue3、Element-Plus构建的后台管理系统，提供了丰富的功能组件聊天工作室 (腾讯IM即时通讯) 项目地址:https://gitcode.com/gh_mirrors/pu/PureAdmin 项目简介是一款基于Vue.js和Element-UI开发的后台管理界面模板。它提供了一套完整的前后端分离的基...

meteor-pure-admin:独立的，可定制的Meteor管理面板

04-28

流星的纯管理员一个独立的，可定制的Meteor管理面板版本0.5.0已被完全重写，以利用新的Meteor功能，并且不向后兼容。需要Meteor 1.8或更高版本隔离的 Pure Admin旨在不干扰您的应用程序：使用Shadow DOM防止您的应用程序样式或Pure Admin样式相互干扰不要在客户端上使用路由器或其他第三方程序包。 UI组件是使用Svelte构建的，在构建期间将其转换为Vinilla js。使用动态导入来减少对分发包大小的影响。可客制化就其本身而言，Pure Admin并不能做很多事情。它主要创建UI，并为其他程序包或您的应用程序构建一些api。它几乎没有关于您的应用如何工作的假设。例如，重写PureAdmin.isAdmin函数将删除对Mongo的所有依赖关系。用 meteor add zodern:pure-admin 添加用于Pu

gitblog_00083的博客

03-19

1597

vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版

04-05

vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，

PureUserAdmin-开源

04-24

PureUserAdmin是用于PureFTPd用户数据库的基于WebPHP用户管理工具。

一款开箱即用的 Vue 中后台管理系统框架，兼容PC、移动端

05-20

Vue-element-admin是Vue.js与Element UI结合的一个典型例子，它为开发者提供了一套完整的后台管理系统模板，包括登录/注销、权限控制、页面布局、表单、表格、图表等常见功能模块。 Vue-admin框架通常包含以下关键...

FastAdmin 框架开源免费，一键生成 CRUD，快速搭建项目后台

04-22

FastAdmin 框架开源免费，一键生成 CRUD，快速搭建项目后台，是开发者的好帮手。 FastAdmin 是一款基于 ThinkPHP 和 Bootstrap 的极速后台开发框架，基于Auth验证的权限管理系统，一键生成 CRUD，自动生成控制器、...

vue-pure-admin：企业级中后台管理的技术革新

chenchuang0128的博客

03-15

1万+

在当今快速发展的技术领域，企业级中后台管理系统的重要性日益凸显。为了满足这一需求，开源社区提供了许多中后台管理系统模版。其中，vue-pure-admin以其先进的技术特性和强大的功能，成为了一个备受关注的选择。一、技术概述vue-pure-admin是一款基于Vue3、Vite、Element-Plus、TypeScript等最新技术栈开发的中后台管理系统模版。它全面采用ECMAScript模块（ESM）规范来编写和组织代码，确保了代码的模块化和可维护性。

Pure Admin框架学习笔记---1 （认识它）

一个努力不被优化的程序员

04-14

1257

gitblog_00043的博客

05-15

712

绝对惊艳的开发利器：Vue Pure Admin 助你轻松构建完美后台管理系统！Vue3、 Vite、TypeScript、Pinia、Tailwindcss

最新发布

10-03

887

是一款开源免费且开箱即用的中后台管理系统模版。完全采用ECMAScript模块（ESM）规范来编写和组织代码，使用了最新的等主流技术开发vue-pure-admin：一个简洁、高效的管理后台框架。开发者快速构建现代化、响应式的管理界面。它集成了丰富的功能模块、灵活的组件库和优雅的设计风格，让开发者能在短时间内实现项目的快速迭代。无论是企业级应用还是个人项目，Vue Pure Admin 都能为您提供强大而直观的解决方案，助力提升开发效率与用户体验。

记录pure admin 使用

qq_43371595的博客

11-29

1937

路由根据权限的管理

vue-pure-admin 使用pure-table 怎么固定表头

07-28

Vue-Pure-Admin是一个基于Vue.js的轻量级后台管理系统框架，它整合了Pure Table这个用于构建表格的组件。要在Vue-Pure-Admin中使用Pure Table并实现固定表头，你可以按照以下步骤操作： 1. 首先，在项目中安装所需的依赖： ```bash npm install @vue-pure-admin/components pure-table ``` 2. 在你的组件文件中，引入Pure Table和需要固定的TableHeader组件： ```html <template> <div> <PureTable :data="tableData" :columns="columns">  <PureTableHeader ref="headerRef" />  </PureTable> </div> </template> <script> import { PureTable, PureTableHeader } from '@vue-pure-admin/components'; // ... export default { components: { PureTable, PureTableHeader }, data() { return { tableData: ..., // 表格数据 columns: ..., // 列配置 }; }, mounted() { this.$refs.headerRef.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { this.$refs.headerRef.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { // 在这里计算滚动位置并调整表头位置 const header = this.$refs.headerRef; if (header) { // 根据滚动高度更新表头的位置 header.style.transform = `translateY(-${header.scrollTop}px)`; } } } }; </script> ``` 3. 当页面滚动时，监听`PureTableHeader`的`scroll`事件，根据滚动位置动态调整表头的transform属性，使其始终保持在可视区域内。注意，这只是一个基础示例，实际应用可能需要根据需求调整处理滚动的逻辑，比如计算偏移量、动画效果等。同时，确保你在CSS中设置了合适的样式以便于固定表头。