一、介绍

前端三大框架的无力竞争者 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

公共模板

<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实现朋友圈性能

我的项目中新增了朋友圈性能，应用svelte+mescroll实现转圈圈成果。

<!-- //朋友圈模板 --><script>    import { onMount } from 'svelte'    import Navbar from '$lib/Navbar'    import MeScroll from 'mescroll.js/mescroll.min.js'    import 'mescroll.js/mescroll.min.css'    onMount(() => {        let mescroll = new MeScroll('mescroll', {            down: {                auto: false,                offset: 40,                callback: downCallback            },            // up: {            //     callback: upCallback            // }        })        // 下拉刷新的回调        function downCallback() {            console.log('下拉刷新...')            setTimeout(() => {                // 暗藏下拉刷新的状态;                mescroll.endSuccess()            }, 2000)        }        // 上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10        function upCallback(page) {            console.log('上拉加载...')            var pageNum = page.num; // 页码, 默认从1开始            var pageSize = page.size; // 页长, 默认每页10条        }    })        // ...</script><Navbar title="朋友圈" center transparent>    <svelte:fragment slot="right">        <div><i class="iconfont icon-tupian"></i></div>        <div class="ml-30"><i class="iconfont icon-fabu"></i></div>    </svelte:fragment></Navbar><div class="sv__scrollview flex1">    <div id="mescroll" class="mescroll">        <div>            <div class="sv__uzone">                ...            </div>        </div>    </div></div>

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

最初附上一个uniapp开发后盾零碎实例我的项目
https://segmentfault.com/a/1190000041357547