Giter VIP home page Giter VIP logo

pure-admin / vue-pure-admin Goto Github PK

View Code? Open in Web Editor NEW
14.2K 127.0 2.7K 224.09 MB

🔥 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统(兼容移动端)

Home Page: https://yiming_chang.gitee.io/vue-pure-admin/#/login

License: MIT License

Shell 0.03% JavaScript 0.59% TypeScript 30.16% HTML 0.81% CSS 0.88% Vue 65.62% SCSS 1.89% Dockerfile 0.02%
element-plus vite vue3 typescript admin esm pinia tailwindcss

vue-pure-admin's Introduction

vue-pure-admin

GitHub license GitHub stars GitHub forks

中文 | English

简介

vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 ECMAScript 模块(ESM)规范来编写和组织代码,使用了最新的 Vue3ViteElement-PlusTypeScriptPiniaTailwindcss 等主流技术开发

赞助商

aitools

精简版本(实际项目开发请用精简版本,提供 非国际化国际化 两个版本选择)

精简版本是基于 vue-pure-admin 提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB,并且会永久同步完整版的代码。开启 brotli 压缩和 cdn 替换本地库模式后,打包大小低于 350kb

点我查看非国际化精简版本
点我查看国际化精简版本

配套视频

点我查看 UI 设计
点我查看快速开发教程

配套保姆级文档

点我查看 vue-pure-admin 文档
点我查看 @pureadmin/utils 文档

优质服务、软件外包、赞助支持

点我查看详情

Tauri 版本

点我查看 Tauri 版本

Electron 版本

点我查看 Electron 版本

预览

点我查看预览

PC

PureAdmin
PureAdmin

暗色风格

PureAdmin
PureAdmin

移动端

PureAdmin

使用 Gitpod

Gitpod(适用于 GitHub 的免费在线开发环境)中打开项目,并立即开始编码.

Open in Gitpod

安装使用

拉取代码

推荐使用 @pureadmin/cli 脚手架


pure-admin-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 项目,如下图

docker-desktop

更新日志

CHANGELOG

如何贡献

非常欢迎您的加入!提一个 Issue 或者提交一个 Pull Request

Pull Request:

  1. Fork 代码!
  2. 创建自己的分支: git checkout -b feat/xxxx
  3. 提交您的修改: git commit -am 'feat(function): add xxxxx'
  4. 推送您的分支: git push origin feat/xxxx
  5. 提交pull request

特别代码贡献

非常感谢你们能深入了解源码并对 pure-admin 组织作出优秀贡献 ❤️

贡献人 具体代码
hb0730 代码
o-cc 代码
yj-liuzepeng 代码
skyline523 代码
shark-lajiao 代码
WitMiao 代码
QFifteen 代码
edgexie 代码

Git 贡献提交规范

参考 vue 规范 (Angular)

  • feat 增加新功能
  • fix 修复问题/BUG
  • style 代码风格相关无影响运行结果的
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • test 测试相关
  • docs 文档/注释
  • chore 依赖更新/脚手架配置修改等
  • workflow 工作流改进
  • ci 持续集成
  • types 类型定义文件更改
  • wip 开发中

浏览器支持

本地开发推荐使用 ChromeEdgeFirefox 浏览器,作者常用的是最新版 Chrome 浏览器
实际使用中感觉 Firefox 在动画上要比别的浏览器更加丝滑,只是作者用 Chrome 已经习惯了,看个人爱好选择吧
更详细的浏览器兼容性支持请看 Vue 支持哪些浏览器?Vite 浏览器兼容性

 Edge
IE
 Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
不支持 最后两个版本 最后两个版本 最后两个版本 最后两个版本

维护者

xiaoxian521Ten-K

许可证

完全免费开源

MIT © 2020-present, pure-admin

Star

非常感谢留下星星的好心人,感谢您的支持 ❤️

Stargazers repo roster for @pure-admin/vue-pure-admin

Fork

瞧,那些 小哥哥小姐姐 认真 学习 的样子真滴是 哎呦不错哦 ❤️

Forkers repo roster for @pure-admin/vue-pure-admin

vue-pure-admin's People

Contributors

bigsnowballhehe avatar chenxi19950223 avatar clovelll avatar coderluojz avatar edgexie avatar hb0730 avatar huohuoit avatar hxzaugustinus avatar incredibleidea avatar lzhd avatar mynetfan avatar newclasscode avatar newives avatar o-cc avatar paiz4ever avatar paobai avatar qfifteen avatar qingguizhang avatar rhh-z avatar rich1e avatar ryiot avatar sedice avatar shark-lajiao avatar skyline523 avatar ten-k avatar witmiao avatar wojiaofuxiaoyun avatar wzc520pyfm avatar xiaoxian521 avatar yj-liuzepeng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-pure-admin's Issues

🧐为什么选择pnpm包管理器以及相关注意点

⚠️注意:如果你使用的是taobao源,请更换到npm源:npm config set registry https://registry.npmjs.org

  1. 节约磁盘空间并提升安装速度​
    当使用 npm 或 Yarn 时,如果你有100个项目使用了某个依赖,就会有100份该依赖的副本保存在硬盘上。 对于 pnpm ,依赖项将存储在一个内容可寻址的仓库中,因此:如果你用到了某依赖项的不同版本,那么只会将有差异的文件添加到仓库。例如,如果它有100个文件,而新版本只改变了其中1个文件。那么 pnpm update 只会向存储中心添加1个新文件,不会仅因为单一的改变而克隆整个依赖。所有文件都会存储在硬盘上的同一位置。 当多个包(package)被安装时,所有文件都会从同一位置创建硬链接,不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。最终你节省了大量与项目和依赖成比例的硬盘空间,并且拥有更快的安装速度!
  2. 创建非扁平化的 node_modules 文件夹​
    当使用 npm 安装依赖时,所有的依赖都会被提升到模块的根目录。 因此,项目可以访问到未被添加进 当前 项目的依赖。pnpm 使用软链的方式将项目的直接依赖添加进模块文件夹的根目录。
  3. 如果你使用过yarn,那么可以无学习成本的迁移,基本命令保持一致
  4. 注意点:
    image
    下面是我开发环境的版本
    image
  5. 如果你还没有安装pnpm,请执行下面命令:
    安装:npm install -g pnpm 或 npx pnpm add -g pnpm
    升级:pnpm add -g pnpm
    兼容性:https://pnpm.io/zh/installation#%E5%85%BC%E5%AE%B9%E6%80%A7
  6. 常用知识:推荐文章:https://blog.csdn.net/weixin_40817115/article/details/86611179
    image

🙏目前vite打包的问题

可能你会遇到如下图警告,警告过多,导致打包时间过长,让我们耐心一点,等待官方解决🙏
目前解决方案:build: { minify: false } ,不采用Esbuild打包最小化混淆
image
image

如何动态配置token

我把token放在store.getters.token中,配置Authorization: store.getters.token,store中的token最开始放的是登陆前的基础token,登陆后把获取到新的token放进去,但取出来的还是以前的老的token,没有取到新的token,请问该如何配置呢?

Uncaught ReferenceError: process is not defined

path.js:25 Uncaught ReferenceError: process is not defined
    at node_modules/path/path.js (path.js:25)
    at __require (chunk-A5ICIBVI.js?v=25964595:12)
    at dep:path:1

新建的项目,按着搬代码,SidebarItem.vue提示这个报错,感觉path库和@types/node里的path冲突,去掉path又报错

vue-router.esm-bundler.js:3248 TypeError: path.resolve is not a function
    at Proxy.resolvePath (SidebarItem.vue:110)
    at Proxy._sfc_render (SidebarItem.vue:10)
    at renderComponentRoot (runtime-core.esm-bundler.js:1168)
    at componentEffect (runtime-core.esm-bundler.js:5214)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:5167)
    at mountComponent (runtime-core.esm-bundler.js:5126)
    at processComponent (runtime-core.esm-bundler.js:5084)
    at patch (runtime-core.esm-bundler.js:4690)

只去掉@types/node也报错

Uncaught Error: Module "path" has been externalized for browser compatibility and cannot be accessed in client code.
    at Object.get (__vite-browser-external:path:3)
    at Proxy.resolvePath (SidebarItem.vue:110)
    at Proxy._sfc_render (SidebarItem.vue:10)
    at renderComponentRoot (runtime-core.esm-bundler.js:1168)
    at componentEffect (runtime-core.esm-bundler.js:5214)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:5167)
    at mountComponent (runtime-core.esm-bundler.js:5126)
    at processComponent (runtime-core.esm-bundler.js:5084)

不知道是哪里的问题,求教

建议支持动态路由国际化

现在支持国际化挺好的,但是不够完美。
因为采用动态路由,这时路由中对应的国际化又需要本地预配置,这样就违背了动态的初衷。
看看有没有办法路由、国际化同时动态。
那样就完美了。

关于动态国际化的建议。

关于最近路由动态国际化的更新。
我觉得每个地方使用transformI18n(item.meta.title, item.meta.i18n)有点繁杂。
我觉得这个这部分在路由获取载入的时候处理比较好。只需要在initRouter方法里
统一遍历路由源数据。使用transformI18n, 让meta.title根据item.meta.i18n改成正确的meta.title这样使用到的地方,只用{{item.meta.title}}就好了。
以后维护起来也方便,用起来也美观。
因为改动比较大。调整的页面文件比较多。所以我没有进行修改。

依赖包下载404

安装的时候出现依赖包下载不了,报错信息:

GET https://registry.npmjs.org/~/@intlify/core-base/-/core-base-9.2.0-beta.17.tgz: Not Found - 404

富文本功能太有限

image
很多时候使用富文本都是搞个图文,需要直接上传本地文件,或者直接微信截图,Ctrl+V拷贝进去,这个感觉像个文本框

Add multi-mode navigation

Is your feature request related to a problem? Please describe.
horizontal / vertical navigation

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

利用docker构建时,pnpm无法引入包

尝试利用docker构建开发环境时,总是提示包无法引入

scanner-web | 
scanner-web | > [email protected] serve /project
scanner-web | > pnpm dev
scanner-web | 
scanner-web | 
scanner-web | > [email protected] dev /project
scanner-web | > vite
scanner-web | 
scanner-web | failed to load config from /project/vite.config.ts
scanner-web | error when starting dev server:
scanner-web | Error: Cannot find module '@vitejs/plugin-vue-jsx'
scanner-web | Require stack:
scanner-web | - /project/vite.config.ts
scanner-web | - /project/node_modules/vite/dist/node/chunks/dep-efe32886.js
scanner-web | - /project/node_modules/vite/dist/node/cli.js
scanner-web | - /project/node_modules/vite/bin/vite.js
scanner-web |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
scanner-web |     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
scanner-web |     at Module.require (node:internal/modules/cjs/loader:1005:19)
scanner-web |     at require (node:internal/modules/cjs/helpers:102:18)
scanner-web |     at Object.<anonymous> (/project/vite.config.ts:32:40)
scanner-web |     at Module._compile (node:internal/modules/cjs/loader:1101:14)
scanner-web |     at Object.require.extensions.<computed> [as .ts] (/project/node_modules/vite/dist/node/chunks/dep-efe32886.js:46235:20)
scanner-web |     at Module.load (node:internal/modules/cjs/loader:981:32)
scanner-web |     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
scanner-web |     at Module.require (node:internal/modules/cjs/loader:1005:19)
scanner-web |  ELIFECYCLE  Command failed with exit code 1.
scanner-web |  ELIFECYCLE  Command failed with exit code 1.

docker 的配置如下

FROM node:16.11.0-slim

RUN mkdir /project
WORKDIR /project

COPY . .

RUN npm install -g pnpm 
RUN pnpm add -g pnpm
RUN pnpm i
RUN pnpm add -D @vitejs/plugin-vue-jsx

CMD [ "pnpm", "serve"]

Module "path"

#SidebarItem 主键 中 使用到了 path 包

const resolvePath = (routePath: string) => {
      return path.resolve(props.basePath, routePath);
    };

出现这样的错误
Uncaught (in promise) Error: Module "path" has been externalized for browser compatibility and cannot be accessed in client code.
请问这个是你是怎么解决的?

appMain margin-top:38px

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

🥰 之后平台要做的升级

    • 更新font-awesome到5.0版本,因为5.0以下的版本官方不再维护,但平台依旧会兼容font-awesome4版本
    • 平台已有视频教程,之后将编写文档(文档地址
    • 目前平台的标签页强制关联了本地存储,下一步标签页默认放到内存中并支持可配置持久化标签页
    • 暗黑主题
    • 重构env环境和http请求,带来更方便的体验
    • 重构路由,优化权限模块,带来更方便的体验
    • 添加综合模式导航,类似下图
      输入图片说明

开源不易,望珍惜!!!

保留页面编辑内容

保留页面编辑内容,如在“编辑”页面编辑了一些内容,切换到其他页面,再切换回来,发现原来编辑的内容不见了,希望能够保留。

按需引入element-plus问题

请问按需引入UI组件后,这个样式会出现问题吗,我之前按需引入后,个别组件样式加载不出来,全局引入就可以

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.