Javascript

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

本文主要是介绍基于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



这篇关于基于svelte3高仿微信|svelte.js聊天实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!