Git Product home page Git Product logo

youlaitech / vue3-element-admin Goto Github PK

View Code? Open in Web Editor NEW
1.3K 14.0 338.0 3.75 MB

🔥基于 vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板(配套后端源码),vue-element-admin 的 vue3 版本。

Home Page: https://vue3.youlai.tech

License: MIT License

HTML 0.30% Vue 63.60% TypeScript 33.24% SCSS 0.90% JavaScript 1.96%
typescipt element-plus vue3 vue-element-admin vue vite vue-admin vue-router vue3-element-admin

vue3-element-admin's Introduction

vue3-element-admin

vue3-element-admin

项目简介

vue3-element-admin 是基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的免费开源的中后台管理的前端模板(配套Java 后端源码)。

项目特色

  • 简洁易用:基于 vue-element-admin 升级的 Vue3 版本,无过渡封装 ,易上手。

  • 数据交互:同时支持本地 Mock 和线上接口,配套 Java 后端源码在线接口文档

  • 权限管理:用户、角色、菜单、字典、部门等完善的权限系统功能。

  • 基础设施:动态路由、按钮权限、国际化、代码规范、Git 提交规范、常用组件封装。

  • 持续更新:项目持续开源更新,实时更新工具和依赖。

项目预览

明亮模式

暗黑模式

接口文档

项目地址

项目 Gitee Github
前端 vue3-element-admin vue3-element-admin
精简版 vue3-element-admin-thin vue3-element-admin-thin
后端 youlai-boot youlai-boot

环境准备

环境 名称版本 下载地址
开发工具 VSCode 下载
运行环境 Node ≥18 (其中 20.6.0 版本不可用) 下载

项目启动

# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git

# 切换目录
cd vue3-element-admin

# 安装 pnpm
npm install pnpm -g

# 设置镜像源(可忽略)
pnpm config set registry https://registry.npmmirror.com

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

项目部署

# 项目打包
pnpm run build

# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
            # vapi.youlai.tech 替换后端API地址,注意保留后面的斜杠 /
            proxy_pass http://vapi.youlai.tech/; 
	}
}

本地Mock

项目同时支持在线和本地 Mock 接口,默认使用线上接口,如需替换为 Mock 接口,修改文件 .env.developmentVITE_MOCK_DEV_SERVERtrue 即可

后端接口

如果您具备Java开发基础,按照以下步骤将在线接口转为本地后端接口,创建企业级前后端分离开发环境,助您走向全栈之路。

  1. 获取基于 JavaSpringBoot 开发的后端 youlai-boot 源码。
  2. 根据后端工程的说明文档 README.md 完成本地启动。
  3. 修改 .env.development 文件中的 VITE_APP_API_URL 的值,将其从 http://vapi.youlai.tech 更改为 http://localhost:8989。

注意事项

  • 自动导入插件自动生成默认关闭

    模板项目的组件类型声明已自动生成。如果添加和使用新的组件,请按照图示方法开启自动生成。在自动生成完成后,记得将其设置为 false,避免重复执行引发冲突。

  • 项目启动浏览器访问空白

    请升级浏览器尝试,低版本浏览器内核可能不支持某些新的 JavaScript 语法,比如可选链操作符 ?.

  • 项目同步仓库更新升级

    项目同步仓库更新升级之后,建议 pnpm install 安装更新依赖之后启动 。

  • 项目组件、函数和引用爆红

    重启 VSCode 尝试

  • 其他问题

    如果有其他问题或者建议,建议 ISSUE

项目文档

提交规范

执行 pnpm run commit 唤起 git commit 交互,根据提示完成信息的输入和选择。

项目统计

Alt

Thanks to all the contributors!

contributors

交流群🚀

关注「有来技术」公众号,获取交流群二维码。

如果交流群的二维码过期,请加微信(haoxianrui)并备注「前端」、「后端」或「全栈」以获取最新二维码。

为确保交流群质量,防止营销广告人群混入,我们采取了此措施。望各位理解!

公众号 交流群
有来技术公众号二维码 交流群二维码

vue3-element-admin's People

Contributors

1szx1 avatar 2393686479 avatar 4eversad avatar analonejaver avatar apriltong avatar cshaptx4869 avatar diamont1001 avatar don-yangzhiwen avatar haoxianrui avatar rackar avatar skyselang avatar ssyng avatar tianvier avatar tricker39 avatar ximy avatar y4eversad avatar yang-505 avatar ygcaicn avatar zhangchuan11 avatar zjsy521 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

vue3-element-admin's Issues

权限设计建议

个人感觉,这样设计也许更好,每一个菜单设置一个权限码,用户可以赋予角色或者权限。

前端权限判断可以直接用权限码进行判断

现在通过角色判断,后端处理会有点复杂的感觉

这是一个递归组件吗?

src/layout/components/Sidebar/components/SidebarMenuItem.vue

<SidebarMenuItem v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" />
这是一个递归组件吗?

求大佬帮帮忙。项目的部署看不懂,演示环境禁止新增、修改和删除数据,请本地部署后测试”,该怎么消除。

上传文件至远程服务器
将打包生成在 dist 目录下的文件拷贝至 /usr/share/nginx/html 目录

nginx.cofig 配置
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}

反向代理配置

location /prod-api/ {
proxy_pass http://vapi.youlai.tech/; # vapi.youlai.tech替换成你的后端API地址
}
}

这几个步骤一直没有头绪,还有“演示环境禁止新增、修改和删除数据,请本地部署后测试”,该怎么消除

在修改有接口的页面里的js热更新后 keep-alive router-view直接为空

尊敬的作者,你好!

代码版本如下:
{
"name": "vue3-element-admin",
"private": true,
"version": "2.6.2",
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "vite serve --mode development",
"build:prod": "vite build --mode production && vue-tsc --noEmit",
"prepare": "husky install",
"lint:eslint": "eslint --fix --ext .ts,.js,.vue ./src ",
"lint:prettier": "prettier --write "/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}"",
"lint:stylelint": "stylelint "
/*.{css,scss,vue}" --fix",
"lint:lint-staged": "lint-staged",
"commit": "git-cz"
},
...
}

复现经过:

  1. 在如下文件内写一个console.log 保存 4061696923143_.pic.jpg
  2. 切换路由到用户管理后页面内容为空 4071696923261_.pic.jpg

问题:

  1. 这是否是一个bug

菜单管理中不同目录存在同名菜单则无法访问

假设有task/list,那么app/list就无法访问。
这是设计缺陷还是代码缺陷?如果我要访问就必须更改其中一者的子菜单路由名称?必须要保证全局的子菜单名都不一样?
但task/list和app/list指向的是不同的资源啊

Routing works , however url refresh , leads to 404, after deployment

This solution works perfectly in local environment . The issue starts after deployment , the login is using keycloak and it redirects perfectly . However , if the above url is refreshed manually , it crashes sending 404.

It works perfectly for routing in deployed version, however fails when and gives 404 , when same url refreshed.

I am logging in using keycloak login as soon as the web url is clicked

PLease help.

关于增加用户列表属性修改权限点的申请

属性修改:指的是列表单字段的修改。比如,用户列表的status字段,如果做成switch效果,那么就可以修改状态,提交给接口数据格式为 {id:xxx, field: 'status', value: xxx}
CURD组件中默认支持属性修改,但是现在没有属性修改的权限点,所以默认是不允许修改(disabled),如果要体验的话要麻烦大大增加一个属性修改的权限点标识,比如 sys:user:modify

Snipaste_2024-06-17_14-00-27

去掉i18n之后,版本降为9,配置文件是不是需要做做一下修改啊

2023.03.30直接git clone code之后本地启动页面控制台报错 _ctx.$t is not a function
但是半个月前代码可以正常启动,看了下历史发现i18n这部分有修正,目前本地将src/lang/index.ts 中 const i18n中添加 globalInjection: true 页面运行正常,希望可以查一下是不是这个原因,别人有没有同样的经历

签名保存至后端无反应

image
z'c正常操作下走不进去这个if判断;取消 !mime.length 这个条件保存文件的接口也会报签名不一致的错误
image

为啥我的按需引入ElMessage, ElMessageBox...这些都没引进来

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
resolvers: [
// 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)
ElementPlusResolver(),
IconsResolver({}),
],
我都复制粘贴了也没用

mock数据模拟时似乎无法拦截url?

mock仿照users写的:

{
    url: "users/TaskShow",
    method: ["GET"],
    body: {
      code: "00000",
      data: [
        { taskname: "Task1", taskstate: "running" },
        { taskname: "Task2", taskstate: "starting" },
      ],
      msg: "一切ok",
    },
  },

请求函数:

import request from "@/utils/request";
//import SERVER_URL from "@/App.vue";
const USER_BASE_URL = "/api/v1/users";
export function gettasklist(query: object) {
  return request<any, Tasklist[]>({
    //url: `${SERVER_URL}/user`,
    url: `${USER_BASE_URL}/TaskShow`,
    method: "get",
    params: query,
  });
}
export interface Tasklist {
  // 任务名称
  taskname?: string;
  // 任务状态
  taskstate?: string;
}

相应包如下:{"code":"B0001","data":null,"msg":"Request method 'GET' is not supported"}

动态路由 name 属性值不支持小写

当路由的name属性值为小写值时,页面无法被缓存,每次点击都需要被重新加载,Keep-alive 并没有限制这个,能否帮忙看下是什么原因导致的?

将路由的响应信息改为以下内容可复现

{
    "code": "00000",
    "data": [
        {
            "path": "/system",
            "component": "Layout",
            "redirect": "/system/user",
            "meta": {
                "title": "系统管理",
                "icon": "system",
                "hidden": false,
                "roles": [
                    "ADMIN"
                ],
                "keepAlive": true
            },
            "children": [
                {
                    "path": "user",
                    "component": "system/user/index",
                    "name": "user",
                    "meta": {
                        "title": "用户管理",
                        "icon": "user",
                        "hidden": false,
                        "roles": [
                            "ADMIN"
                        ],
                        "keepAlive": true
                    }
                },
                {
                    "path": "role",
                    "component": "system/role/index",
                    "name": "role",
                    "meta": {
                        "title": "角色管理",
                        "icon": "role",
                        "hidden": false,
                        "roles": [
                            "ADMIN"
                        ],
                        "keepAlive": true
                    }
                },
                {
                    "path": "menu",
                    "component": "system/menu/index",
                    "name": "menu",
                    "meta": {
                        "title": "菜单管理",
                        "icon": "menu",
                        "hidden": false,
                        "roles": [
                            "ADMIN"
                        ],
                        "keepAlive": true
                    }
                },
                {
                    "path": "dept",
                    "component": "system/dept/index",
                    "name": "dept",
                    "meta": {
                        "title": "部门管理",
                        "icon": "tree",
                        "hidden": false,
                        "roles": [
                            "ADMIN"
                        ],
                        "keepAlive": true
                    }
                }
            ]
        }
    ],
    "msg": "一切ok"
}

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.