一、介绍
svelte.js前端新框架爆火,可是网上关于svelte.js开发的组件库及后台系统比较少。于是就自己动手开发了一个svelte-ui组件库和svelte-admin后台管理系统。
Svelte Ui Admin 一款基于svelte3.x+svelteKit+svelte-ui+sass+mockjs
等技术构建的中后台管理。
二、技术实现
- 开发工具:Vscode
- 技术框架:svelte3.x+svelteKit+vite3
- UI组件库:svelte-ui (基于svelte自定义pc端UI组件库)
- 图表组件:echarts^5.3.3
- 图文编辑器:wangeditor^4.7.15
- 国际化方案:svelte-i18n^3.4.0
- 数据模拟:mockjs^1.1.0
svelte-admin
支持动态化换肤、中英文/繁体国际化语言。
目录结构
Svelte-Ui组件库
项目中所有的组件均是遵循使用svelte-ui组件库。整体风格统一美观。
公共布局模板
svelte-admin
整体分为顶部导航条+左侧动态路由菜单+右侧主内容区域三个模块。
<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}>
<RouteMenu
routes={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>
+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-i18n国际化
项目路由菜单及页面支持动态配置中英文/繁体多语言。
npm i svelte-i18n
/**
* 国际化语言配置
* @author YXY
*/
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()
}
}
}
svelte动态图表配置
为了解决多个地方使用图表的问题,新建了一个图表hooks文件。
/**
* @title 动态图表Hooks
* @author YXY
*/
import * as echarts from 'echarts'
import elementResizeDetector from "element-resize-detector"
import utils from '@/utils'
export const useCharts = async(node, options) => {
let chartInstance
let chartNode = null
let erd = elementResizeDetector()
const resizeFn = utils.debounce(() => {
chartInstance.resize()
}, 100)
if(node) {
chartInstance = echarts.init(node)
chartInstance.setOption(options)
chartNode = chartInstance
}
erd.listenTo(node, resizeFn)
}
好了,基于svlete-ui开发后台管理系统就先分享这么多。后续会陆续分享一些实例项目。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。