Svelte3-Admin：基于svelte-ui中后台管理系统框架|svelte-admin后台系统

一、介绍

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整体分为顶部导航条+左侧动态路由菜单+右侧主内容区域三个模块。

    

        

            

        
        
        

            
            {#if rootRouteEnable}
            

                
            
            {/if}

            {#if (rootRouteEnable && route != '/') || !rootRouteEnable}
            

                
            
            {/if}

            

                
                
                
                
                
                    

                        
                    
                
            
        
    

+error.svelte错误处理

    



    

    

        
┗| {$page.status} |┛  Page Error~~
        
{$page.error.message}
        Go Home
    

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...

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