为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Vue.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




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
94

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消