首页 > 其他分享 >清新优雅&高颜值!一个基于Vue3实现的后台管理模板

清新优雅&高颜值!一个基于Vue3实现的后台管理模板

时间:2024-06-14 09:54:57浏览次数:24  
标签:高颜值 项目 ## Vue3 https pnpm 后台 模板

大家好,我是 Java陈序员

今天,给大家介绍一个高颜值的开源后台管理模板,已经收获了 8k+ Star!

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

SoybeanAdmin —— 一个清新优雅、高颜值且功能强大的后台管理模板。基于最新的前端技术栈,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。

SoybeanAdmin 内置了丰富的主题配置和组件,代码规范严谨,实现了自动化的文件路由系统。

SoybeanAdmin 提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。

功能特色:

项目截图

项目部署

环境准备:

  • Git
  • NodeJS 18+
  • pnpm 8+

克隆项目

git clone https://github.com/soybeanjs/soybean-admin.git

安装依赖

cd soybean-admin
pnpm i

启动项目

## 启动测试环境
pnpm run dev

## 启动生产环境
pnpm run dev:prod

项目构建

## 构建测试环境
pnpm run build:test

## 构建生产环境
pnpm build

最后,贴上项目地址:

项目地址:https://github.com/soybeanjs/soybean-admin
在线体验:https://soybeanjs.cn/login?redirect=/home

最后

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star

https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

标签:高颜值,项目,##,Vue3,https,pnpm,后台,模板
From: https://www.cnblogs.com/codechen8848/p/18245467

相关文章

  • 设计模式:一个应用理解模板方法模式
    一个需求在实际生产开发中,数据库初始化、升级是没办法规避的,一般常见的方案是外挂一套初始化脚本加一堆SQL文件,其实可以把这个过程做到系统里,做到一个程序包内自带数据库的初始化,或者数据库升级,所以需求就是做一个数据库的初始化、升级的java功能,使用过flyway的同学应该能更明......
  • Vue3——computed计算属性
    computed计算属性的作用computed作用:根据以有数据计算出新数据(和vue2的computed的作用一样)特点:只要值一改变,就重新计算,如果没变,则使用缓存中计算出来的值与函数作对比,在模板中多次使用,计算属性的只会执行一次,有缓存。而函数会执行多次,无缓存。俩种使用方式computed计......
  • 基于jeecgboot-vue3的Flowable流程-流程处理(一)
    因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。这部分修正一些流程处理中VForm3线上的一些bug问题1、初始化流程提交与现实的前端页面代码<!--初始化流程加载默认VForm3表单信息--><el-col:span="16":offset="4"v-if="formConfOpen">......
  • vue3实现在移动端时用卡片展示数据而在PC端时切换为表格展示数据
    1、根据屏幕宽度自动切换卡片和表格来展示数据2、PC端用pagination分页,移动端用v-infinite-scroll滚动分页3、准备封装成一个组件......<template><div><divv-if="isMobile"class="infinite-list"style="overflow:auto"v-infinite-scroll="loadMore&q......
  • vue3 动态路由生成
    动态路由生成----vue3stores/index.jsimport{defineStore}from'pinia';exportconstuseRouteStore=defineStore('route',{state:()=>({dynamicRoutes:false})});router/index.jsimport{createRouter,createWebHistory}fr......
  • vite+vue3展示文件夹内的所有组件
    https://www.cnblogs.com/y-shmily/p/16546743.html 在组件目录下新建index.jsimport{markRaw}from"vue";constfilesNameList=[];constfiles=import.meta.glob("./*.vue");for(constkeyinfiles){constfileName=key.replace(/(\.......
  • Beta版会议总结(事后诸葛亮模板)
    **1.*以“事后诸葛亮”为模板总结会议header1、我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述?主要是要方便老师学生的生活,少跑一趟取快递时间可用做其他事情,而取快递的人可以通过拿一次快递,挣一顿饭钱,方便自己方便他人;......
  • java+vue3+el-tree实现树形结构操作
    基于springboot+vue3elementPlus实现树形结构数据的添加、删除和页面展示效果如下代码如下,业务部分可以自行修改java后台代码importcom.baomidou.mybatisplus.core.conditions.query.QueryWrapper;importcom.daztk.mes.common.annotation.LogOperation;import......
  • vue3 修改element-plus主题颜色(css版)
    vue3修改主题颜色_若依vue3改默认主题色-CSDN博客上面的是js修改-----------------------------------------------------------------------------------------------------------------------1.新建一个APPStyle.css文件代码/*8这里是要替换的样式,可以参开下面注释......
  • 国思RDIF.vNext全新低代码快速开发框架平台6.1版本发布(支持vue2、vue3)
    1、平台介绍RDIF.vNext,全新低代码快速开发集成框架平台,给用户和开发者最佳的.Net框架平台方案,为企业快速构建跨平台、企业级的应用提供强大支持。RDIF.vNext的前身是RDIFramework框架,RDIF(RapiddevelopIntegrateFramework,vNext代表全新下一代),全新设计,全新开发,代码量减......