基于svelte3高仿微信|svelte.js聊天实例

项目介绍

svelte3-chat 基于svelte.js+svelteKit+sass+mescroll.js等技术开发的仿微信app聊天实例项目。

基本实现发送图文消息、图片/视频/网址预览、红包/朋友圈等功能。

使用技术

• 编码器：VScode
• 框架技术：svelte^3.46.0+svelteKit
• 下拉组件：mescroll.js^1.4.2
• 样式处理：sass+svelte-preprocess
• 弹窗组件：svelte-popup

项目目录

基于svelteKit构建的项目，目录结构如下

公共模板

svelte.js中提供了

<script>
    import { onMount } from 'svelte'
    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
    import { userinfo } from '@/store/index.js'

    let whiteRoute = ['/auth/login', '/auth/register']

    onMount(() => {
        if(!$userinfo) {
            goto('/auth/login')
        }else {
            if(whiteRoute.includes($page.url.pathname)) {
                goto('/')
            }else {
                goto($page.url.pathname)
            }
        }
    })
</script>

<div class="sv__container flexbox flex-col">
    <slot />
</div>

<style>
    @import '@/app.scss';
    @import '@assets/css/reset.scss';
    @import '@assets/css/layout.scss';
    @import '@assets/fonts/iconfont.css';
</style>

## svelte.config.js

/**

• svelte.config.js基础配置文件
  */

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’)
}
}
}
},
// allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
preprocess: SvelteProcess()
};

export default config