Svelte3-Chat：基于svelte+svelteKit+sass仿微信聊天实例|svelte仿微信

一、介绍

前端三大框架的有力竞争者 svelte.js 问世啦。号称比vue.js还好用，无虚拟DOM、极速响应能力、编译及运行速度超快。github上面star已经达到58K+。足以证明值得一学。

svelte3-chat 基于 svelte.js+svelteKit+sass+mescroll 开发的仿微信app界面聊天实战项目。

二、技术栈

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

支持发送图文消息/gif动图、图片/视频预览、下拉刷新、红包及朋友圈等功能。

三、项目结构目录

svelte自定义导航栏Navbar/菜单栏Tabbar

顶部导航条及底部菜单栏均是基于svelte定制开发的自定义组件。

之前有分享过一篇文章，大家可以去看下。
https://segmentfault.com/a/1190000041539049

svelte实现弹窗功能

项目中的所有弹窗效果，均是svelte自定义组件实现功能。

svelte-popup 一款基于Svelte3.x开发自定义多功能svPopup弹出框组件，支持超过20+参数自由配置、组件式+函数式混合调用方式。

https://segmentfault.com/a/1190000041566666

svelte配置文件

在svelte项目中也可以使用sass编写样式。

npm i sass svelte-preprocess -D

/**
 * 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

公共模板

svelte实现朋友圈功能

项目中新增了朋友圈功能，使用svelte+mescroll实现转圈圈效果。

    
        

        

    



    

        

            

                ...
            
        
    

Ok，基于svelte.js开发聊天项目就分享到这里。

最后附上一个uniapp开发后台系统实例项目
https://segmentfault.com/a/1190000041357547