概述< /h1>
svelte-webchat一款基於svelte3.x+svelteKit+sass+mescroll.js等技術開發的仿macOs微信聊天界面實例，全新Dock風格菜單/毛玻璃背景虛化效果。

技術棧

框架技術：svelte^3.46.5+svelteKit
狀態管理：svelte/store
下拉刷新：mescroll.js
iconfont圖標：阿里巴巴字體圖標庫
自定義滾動條：svelte-scrollbar
自定義彈窗：svelte-layer< /li>
sass/less預處理：sass^1.50.1+svelte-preprocess

項目結構

預覽版

视频加载中...

Svelte.js框架

svelte.js一款新的前端框架。無虛擬DOM、極速響應能力。 start高達58K+。

號稱是比Vue.js還快、語法還精簡、編譯/運行速度還快。

https://github.com/sveltejs/svelte

svelte.config.js配置

配置一些alias路徑、sass預編譯等功能。

import adapter from '@sveltejs/adapter-auto'import path from 'path'import SvelteProcess from 'svelte-preprocess'/** @type {import('@sveltejs/kit').Config} * /const config = {    kit: {        adapter: adapter(),        vite: {            resolve: {                alias: {                    '@': path.resolve('./src'),                    '@assets': path.resolve('./ src/assets'),                    '@utils': path.resolve('./src/utils')                }            }        }    },    // 禁用Svelte 警告未使用的CSS 選擇器(css-unused-selector)    onwarn: (warning , handler) => {        const { code, frame } = warning        if (code === "css-unused-selector")            return        handler(warning)    },    preprocess: SvelteProcess()};export default config;

svelte.js公共佈局模板

svelte.js雖說沒有vue裡面的router -view，但是svelteKit提供了類似的__layout.svelte模板佈局及__error.svelte錯誤頁。

<div class="sv__container flexbox flex-alignc flex-justifyc" style="--themeSkin: {$skin}">    <div class="sv__wrapper" class:maximize={$isWinMaximize }>        {#if $userinfo}        <div class="sv__board flexbox flex-col">            <!-- <div class="sv__topbar">頂部模塊</div> -->            < ;div class="sv__mainwrap flex1 flexbox">                <!-- <div class="sv__sidebar">側邊欄</div> -->                <Middle />                <div class=" sv__mainbx flex1 flexbox flex-col">                    <Winbar />                    <slot />                </div>            </div>            <Dock />        </div>        {:else}        <div class ="sv__board flexbox flex-col">            <div class="sv__mainwrap flex1 flexbox">                <slot />            </div>        </div>        {/if}    </div></ div>

__error.svelte錯誤頁

<!-- //Svelte錯誤頁--><script context="module">    export function load({ error, status }) {        return {            props: { error, status } }    }</script><script>    import { goto } from '$app/navigation'    export let status    export let error    function goBack() {        // history.go(-1)        goto('/')    }< ;/script><svelte:head>    <title>{status} Error!</title></svelte:head><div class="sv__scrollview flex1">    <div class="sv__page- error flexbox flex-col flex-alignc flex-justifyc">        <div class="sv__page-error-img">            <img src="404.png" alt="" />        </div> <div class="sv__page-error-content">            <div class="c-red fs-18">┗| {status} |┛  Page Error~~</div>            <div class= "c-999 mt-10">{error.message}</div>            <div class="sv__btn sv__btn-default" style="color:#40b3ff;height:32px;width:120px;" on: click={goBack}><i class="iconfont icon-arrL"></i> 返回首頁</div>        </div>    </div></div>