关于svelte:Svelte3Admin基于svelteui中后台管理系统框架svelteadmin后台系统

一、介绍

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-ui桌面pc端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开发后盾管理系统就先分享这么多。后续会陆续分享一些实例我的项目。

https://segmentfault.com/a/11...