Svelte-Ui-Admin基于svelte-ui中后台管理系统|Svelte3+Vite3后台框架

Svelte Ui Admin基于svelte3.x+svelteKit+svelteUI整合的中后台管理系统。

一款基于svelte3.x+vite3+svelteKit+svelteUi+svelte-i18n等技术开发的高颜值中后台管理系统SvelteUiAdmin。包含了常用的表格/表单/编辑器/列表/权限控制/弹窗消息提示等解决方案。

技术栈

框架技术：svelte3.x+svelteKit+vite3
UI组件库：svelte-ui (基于svelte自定义pc端UI组件库)
样式处理：sass^1.54.4
图表组件：echarts^5.3.3
编辑器组件：wangeditor^4.7.15
国际化方案：svelte-i18n^3.4.0
数据模拟：mockjs^1.1.0

svelte-admin 支持动态化主题换肤、国际化多语言配置(中英文/繁体)，自定义侧边栏菜单。

Table表格组件支持横向/纵向滚动条，固定表头/列表，单选/多选，自定义slot插槽等功能。

项目结构目录

SvelteAdmin公共布局

整体布局分为顶部导航栏+左侧路由菜单+右侧主体内容区域。

<div class="svadmin__container" style="--themeSkin: {$skin}"><div class="svadmin__wrapper-layout flexbox flex-col"><div class="sv__layout-header"><Header /></div><div class="sv__layout-body flex1 flexbox"><!-- //侧边栏 -->{#if rootRouteEnable}<div class="sv__bd-sidebar"><SideMenu routes={mainRoutes} {activeRoute} /></div>{/if}{#if (rootRouteEnable && route != '/') || !rootRouteEnable}<div class="sv__bd-menus" class:collapsed={collapsed&&!rootRouteEnable}><RouteMenuroutes={getAllRoutes}{activeRoute}{activeRootRoute}{rootRouteEnable}{collapsed}/></div>{/if}<div class="sv__bd-main flex1 flexbox flex-col"><!-- 面包屑导航 --><BreadCrumb routes={getAllRoutes} {activeRoute} {activeRootRoute} /><!-- 主内容区 --><Scrollbar autohide gap={2}><div class="sv__main-wrapper"><slot /></div></Scrollbar></div></div></div>
</div>

Svelte-UI高颜值组件库

Svelte Ui Admin遵循Svelte Ui组件风格设计，高颜值的组件让整体风格更加规范统一。

svelte-ui：基于svelte3桌面pc版组件库

错误页处理

sveltekit提供了+layout.svelte公共模板及+error.svelte错误页模板。

<script>import { page } from '$app/stores'import { goto } from '$app/navigation'import { Button } from '$lib/svelte-ui'function goHome() {goto('/home/index')}
</script><svelte:head><title>{$page.status} Error!</title>
</svelte:head><div class="svadmin__pageErr flexbox flex-col flex-alignc flex-justifyc"><div class="svadmin__pageErr-img"><i class="sv-icon-round_close_fill_light"></i></div><div class="svadmin__pageErr-content"><div class="c-red fs-18">┗| {$page.status} |┛  Page Error~~</div><div class="c-999 mt-10 mb-10">{$page.error.message}</div><Button size="small" on:click={goHome}>Go Home</Button></div>
</div>

Svelte自定义路由菜单

基于svelte-ui组件库中的Menu组件实现自定义动态路由菜单。

<Menuclass="svadmin__menu-list"data={getNewRoutes}active={activeRoute}trigger="click"collapse={collapsed}backgroundHover="#e2f2ff"
>{#each getNewRoutes as route}<svelte:component this={routeMenuItem} item={route} {activeRootRoute} {rootRouteEnable} />{/each}
</Menu>

<!-- 二级菜单 -->
<script>import { goto } from '$app/navigation'import { _ } from 'svelte-i18n'import { Menu, MenuItem, MenuSub } from '$lib/svelte-ui'import routeMenuItem from './routeMenuItem.svelte'import utils from '@/utils'import { getCurrentRootRoute, hasChildrenRoute } from '@/utils/routes'export let item = []// 根菜单export let activeRootRoute = ''// 是否开启一级路由菜单export let rootRouteEnable = truefunction changeRoute(path) {if(utils.isExternal(path)) {window.open(path, '_blank')}else {goto(path)}}
</script>{#if !item.meta.hidden}{#if activeRootRoute !== getCurrentRootRoute(item) && rootRouteEnable === true}<div></div>{:else}{#if item.children && Array.isArray(item.children) && hasChildrenRoute(item.children)}<MenuSub key={item.key}><span slot="icon"><i class={item.meta.icon}></i></span><div slot="title">{$_(`menu.${item.meta.title}`)}</div>{#each item.children || [] as route2}<svelte:component this={routeMenuItem} item={route2} {activeRootRoute} {rootRouteEnable} />{/each}</MenuSub>{:else}<MenuItem key={item.key} title={$_(`menu.${item.meta.title}`)} on:click={changeRoute(item.path)}></MenuItem>{/if}{/if}
{/if}

svelte-admin国际化解决方案

通过svelte-i18n支持中英文/繁体三种语言显示。

import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n'
import { browser } from '$app/env'
import Storage from '@/utils/storage'// 引入语言配置
import cn from '@/locale/zh-CN'
import tw from '@/locale/zh-TW'
import en from '@/locale/en-US'export const langKey = 'lang'
export const langVal = 'cn'addMessages('cn', cn)
addMessages('tw', tw)
addMessages('en', en)const lang = getLang()
console.log('当前国际化：', lang)
init({fallbackLocale: lang,initialLocale: getLocaleFromNavigator()
})
setHtmlLang(lang)/* 获取语言 */
export function getLang() {const lang = Storage.get(langKey)return lang || langVal
}/* 持久化存储 */
export function setLang(lang, reload = false) {if(lang != getLang()) {Storage.set(langKey, lang || '')setHtmlLang(lang)// 重载页面if(reload) {window.location.reload()}}
}

Endless，基于svelte.js+svelteUi开发后台管理系统就分享到这里。希望能喜欢哈！

最后附上两个项目实例

uniapp+uview跨端手机后台管理解决方案

electron+vue3+elementPlus仿Macos桌面端管理后台框架

Svelte-Ui-Admin基于svelte-ui中后台管理系统|Svelte3+Vite3后台框架相关推荐

基于javaweb+SSM健身房健身俱乐部管理系统(前台、后台)
基于javaweb+SSM健身房健身俱乐部管理系统(前台.后台) 开发工具:eclipse/idea/myeclipse/sts等均可配置运行适用课程设计,大作业,毕业设计,项目练习,学习演示等 ...
Saas经销商业务管理系统/部门管理/职位管理/员工管理/仓库管理/商品管理/客户管理/价格管理/入库管理/采购管理/销售管理/行为管理/axure高保真经销商业务后台管理系统原型/ssas后台管理
作品介绍:Saas经销商业务管理系统/部门管理/职位管理/员工管理/仓库管理/商品管理/客户管理/价格管理/入库管理/采购管理/销售管理/行为管理/axure高保真经销商业务后台管理系统原型/ssas ...
通用后台管理系统，管理后台框架模板演示地址
一.这个通用的后台管理系统,管理后台框架模板,主要包括如下功能: 1.功能模块主要包括新闻管理.留言管理.广告管理.友情链接管理.图片管理.用户管理等. 具体包括搜索.列表展示.分页.图片上传.批量 ...
golang后台管理系统GoFrame+Vue+ElementUI框架搭建教程
项目介绍一款 Go 语言基于GoFrame.Vue.ElementUI.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构敏捷开发框架,可快速搭建前后端分离后台管理系统,本着简化开 ...
使用VUE搭建后台管理系统(使用vue-cli搭建框架)
接触VUE已经几个月了,已经完成了一个后台管理系统,一个商城系统.今天决定总结一下之前的零散的知识点,在此开一个系列,自己也从头开始完成一个后台管理系统的搭建,并放在github中供大家参考. 安装v ...
一个系统的html源代码,h5后台模板源码bootstrap网站后台管理系统HTML页面后台源代码...
bootstrap后端管理系统HTML页面源代码代码结构清晰,页面组件可DIY性强. HTML页面文件齐全每套都是经典模板模板无需太多有这几十套就足够了拒绝差模板不但不好用而且白费时间废 ...
适合后台管理系统开发的前端框架
1.D2admin 开源地址:https://github.com/d2-projects/d2-admin 文档地址:https://d2.pub/zh/doc/d2-admin/ 效果预览:htt ...
java后台管理系统下载_Java后台管理系统(rongcheng-cms)
内容管理系统(Rongcheng-CMS)是一款基于Java语言开发的功能强大的内容管理系统.成功实现了既能够管理包括企业官网.门户站点.图片视频软件等上传下载网站.博客网站.电商购物网站.物流管理网 ...
14个适合后台管理系统开发的前端框架，建议收藏！
前言:在职业发展道路上,需要不断提升自己,需要学习资源的,一起学习交流的欢迎加群[443128517],小编准备了学习视频,学习线路,自学书籍,职业发展视频.也可以加美女老师七七的微信.二维码放在下面 ...