1 Star 0 Fork 1.3K

ganqiyin / vue3-vite4-element-admin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

在线预览 | 官方文档

项目介绍

vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。

项目特色

  • 基于 vue-element-admin 升级的 Vue3 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本;
  • 配套 Java 后台接口,非 Mock 数据,在线接口文档
  • 01 的项目文档支持,官方文档
  • 系统功能:用户、角色、菜单、字典管和部门管理等;
  • 基础设施:动态路由,按钮权限,常用组件封装。

技术栈

技术栈 描述 官网
Vue3 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/
TypeScript JavaScript 的一个超集 https://www.tslang.cn/
Vite 前端开发与构建工具 https://cn.vitejs.dev/
Element Plus 基于 Vue 3,面向设计师和开发者的组件库 https://element-plus.gitee.io/zh-CN/
Pinia 新一代状态管理工具 https://pinia.vuejs.org/
Vue Router Vue.js 的官方路由 https://router.vuejs.org/zh/

项目预览

在线预览地址http://vue3.youlai.tech/

控制台 & 接口文档

暗黑模式
接口文档

权限管理系统

用户管理 image-20230313003008012
image-20230313003028425 字典管理

项目地址

Gitee Github
vue3-element-admin vue3-element-admin vue3-element-admin
后端 youlai-boot youlai-boot

环境要求

  • Node 环境

    版本:16+

  • 开发工具

    VSCode

  • 必装插件

    • Vue Language Features (Volar)
    • TypeScript Vue Plugin (Volar)

项目启动

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 项目运行
pnpm run dev

# 项目打包
pnpm run build:prod

项目部署

  • 上传文件

    将打包生成在 dist 目录下的文件拷贝至 /usr/share/nginx/html 目录

  • nginx.cofig 配置

    server {
        listen     80;
        server_name  localhost;
    
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
        }
    
        # 代理转发 prod-api 标识至 vapi.youlai.tech
        location /prod-api/ {
            proxy_pass http://vapi.youlai.tech/;
        }
    }
    

接口文档

本地接口

默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建:

  1. 获取基于 Java 、SpringBoot 开发的后端 youlai-boot 源码 ;
  2. 根据后端工程说明文档 README.md 完成本地启动;
  3. 替换 vite.config.ts 的代理目标地址 vapi.youlai.tech 为本地的 localhost:8989

技术群

欢迎加我的微信,备注 前端后端DevOps全栈 进对应技术交流群

微信交流群 我的微信 微信公众号
MIT License Copyright (c) 2022 有来开源组织 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于 vue-element-admin 升级的 Vue3 版本后台管理框架,技术栈: Vue3 、 Vite4、 TypeScript、Element-Plus 、Pinia 。 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/ganqiyin/vue3-vite4-element-admin.git
git@gitee.com:ganqiyin/vue3-vite4-element-admin.git
ganqiyin
vue3-vite4-element-admin
vue3-vite4-element-admin
master

搜索帮助