1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 大数据

云端极简部署Svelte3聊天室

• 大数据 • 阅读 83

一 、通过云开发平台快速创建初始化应用

2.完成创建后就可以在github中查看到新增的Vite仓库

云端极简部署Svelte3聊天室

二 、 本地编写 Svelte3聊天室

1.将应用模版克隆到本地

  • 首先假定你已经安装了Git、node，没有安装请移步node官网进行安装。克隆项目：
git clone + 项目地址
  • 进入项目文件
cd Svelte
  • 切换到feature/1.0.0 分支上
git checkout feature/1.0.0
  • 安装依赖包
npm install
  • 启动服务
npm run dev

这里打开浏览器8080端口，并出现默认页面。

2.项目结构目录

云端极简部署Svelte3聊天室

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

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

4. 自定义手机端弹窗组件

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

云端极简部署Svelte3聊天室

5. config.js配置文件

如何在svelte.js项目中使用sass/less编写样式？可以安装 sass 及 svelte-preprocess 依赖。

云端极简部署Svelte3聊天室 
/**
 * 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

6. SvelteKit公共模板及错误页

使用svelteKit构建的项目，公共模板__layout.svelte及错误页__error.svelte配置如下。

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

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

<!-- //Svelte错误页 -->
<script context="module">
    export function load({ error, status }) {
        return {
            props: { error, status }
        }
    }
</script>

<script>
    import Navbar from '$lib/Navbar'

    export let status
    export let error

    function goBack() {
        history.go(-1)
    }
</script>

<svelte:head>
    <title>404&#x9519;&#x8BEF;</title>
</svelte:head>

<navbar title="Page Error!!!">

<div class="sv__scrollview flex1">
    <div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">

        <div class="sv__page-error-content">
            <div class="c-red fs-36">&#x2517;| {status} |&#x251B; &#x55F7;~~</div>
            <div class="c-999 mt-10">{error.message}</div>
            <div class="mt-20 sv__btn sv__btn-default" on:click="{goBack}"> &#x8FD4;&#x56DE;&#x9996;&#x9875;</div>
        </div>
    </div>
</div>
</navbar>

7. 状态管理+本地存储

svelte框架也提供了创建状态管理svelte/store，配置localStorage本地化存储服务。

/**
 * Svelte状态管理
*/

import { writable } from 'svelte/store'

const createStore = (value, key) => {
    const { subscribe, set, update } = writable(value)
    return {
        // 持久化存储
        useStorage: () => {
            const data = localStorage.getItem(key)
            if(data) {
                set(JSON.parse(data))
            }
            // 订阅
            subscribe(val => {
                [null, undefined].includes(val) ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(val))
            })
        },
        subscribe,
        set,
        update,
    }
}

export const userinfo = createStore(localStorage.getItem('userinfo')||null, 'userinfo')

8. 实现仿朋友圈下拉刷新

使用 svelte.js+mescroll 实现仿朋友圈下拉转圈功能。

云端极简部署Svelte3聊天室 
...

9. 实现聊天功能

聊天页面文本框支持文字+emoj混排，光标处插入表情、网址/图片/视频预览、红包等功能。并且底部文本框单独抽离了一个editor.svelte组件。

云端极简部署Svelte3聊天室

以上就是基于svelte.js+svelteKit开发仿微信app界面聊天实例的一些分享，希望对大家有所帮助！

三 、 云端一键部署上线应用

1.上传代码

git add .
git commit -m '添加你的注释'
git push

2.在日常环境部署

只需一次点击即可部署应用程序。在应用详情页点击日常环境中的[部署]按钮，即可一键部署。部署状态变为绿色后，可点击访问部署网站查看结果。

[En]

Deploy the application with one click. Click the “deploy” button in the daily environment on the application details page to deploy with one click. After the deployment status has changed to green, you can click to visit the deployment website to view the results.

云端极简部署Svelte3聊天室

3.配置自定义域名在线上环境上线

  • 配置线上环境自定义域名。在功能开发验证完成后要在线上环境进行部署，在线上环境的「部署配置」-「自定义域名」中填写自己的域名。例如我们添加一个二级域名 company.workbench.fun 来绑定我们部署的前端应用。然后复制自定义域名下方的API网关地址对添加的二级域名进行CNAME配置。

云端极简部署Svelte3聊天室
  • 配置CNAME地址。复制好 API网关域名地址后，来到你自己的域名管理平台（此示例中的域名管理是阿里云的域名管理控制台，请去自己的域名控制台操作）。添加记录的「记录类型」选择「CNAME」，在「主机记录」中输入你要创建的二级域名，这里我们输入「company」，在「记录值」中粘贴我们之前复制的 API网关域名地址，「TTL」保留默认值或者设置一个你认为合适的值即可。

云端极简部署Svelte3聊天室
  • 在线上环境部署上线。回到云开发平台的应用详情页面，按照部署的操作，点击线上环境的「部署按钮」，部署完成以后就在你自定义的域名进行了上线。CNAME 生效之后，我们输入 company.workbench.fun（示例网址） 可以打开部署的页面。至此，如何部署一个应用到线上环境，如何绑定自己的域名来访问一个线上的应用就完成了，赶紧部署自己的应用到线上环境，用自己的域名玩起来吧 ；）

云端极简部署Svelte3聊天室

4.项目预览效果

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

云端极简部署Svelte3聊天室

一键创建svelte应用模版链接 ：https://workbench.aliyun.com/application/front/create?fromConfig=25&fromRepo=sol_github_25

参考文献：https://www.cnblogs.com/xiaoyan2017/p/16110203.html

Original: https://www.cnblogs.com/helong-123/p/16399517.html
Author: 萌褚
Title: 云端极简部署Svelte3聊天室

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/523321/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球