越寫悅快樂之如何快速開啓一個Svelte項目 介紹 如何使用

今天的越寫悅快樂之系列文章爲大家帶來如何快速開啓一個Svelte項目,如何利用HTML、JavaScript和CSS構建Web應用。話說當下流行的Web開源的JavaScript框架當屬React、Vue.js和Angular,那麼除了這三款框架外,我們別無選擇了嗎?今天爲大家介紹這款框架Svelte,就是其中很有名氣的一員,我相信通過的介紹,你會有興趣進一步瞭解它,讓我們開始探索之旅吧。

介紹

它是什麼

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Svelte是一款構建Web應用的新方式,通過它可以將聲明式組件高效地編譯成JavaScript,並且如外科手術般地更新DOM。

它有什麼特點

  • 減少代碼量
  • 無需操作虛擬DOM
  • 無需使用狀態管理

如何使用

環境要求

  • Node 8.0
  • JavaScript 或者TypeScript
  • VSCode

開啓一個新項目

創建項目

我們打開iterm2軟件,然後定位到Desktop目錄下,執行如下命令:

npx degit sveltejs/template svelte-go

執行完成後切換到svelte-go並使用VSCode打開項目:

cd svelte-go
code -r .

切換編程語言

打開項目後,我們注意到項目的結果如下:

切換到VSCode的終端頁簽下,執行以下命令:

node scripts/setupTypeScript.js

執行完成後會自動刪除scripts目錄。

來個滿天星玩玩

打開App.svelte文件,輸入以下內容:

<script>
    import { onMount } from 'svelte';

    let characters = ['🥳', '🎉', '✨'];

    let confetti = new Array(100).fill()
        .map((_, i) => {
            return {
                character: characters[i % characters.length],
                x: Math.random() * 100,
                y: -20 - Math.random() * 100,
                r: 0.1 + Math.random() * 1
            };
        })
        .sort((a, b) => a.r - b.r);

    onMount(() => {
        let frame;

        function loop() {
            frame = requestAnimationFrame(loop);

            confetti = confetti.map(emoji => {
                emoji.y += 0.7 * emoji.r;
                if (emoji.y > 120) emoji.y = -20;
                return emoji;
            });
        }

        loop();

        return () => cancelAnimationFrame(frame);
    });
</script>

<style>
    :global(body) {
        overflow: hidden;
    }

    span {
        position: absolute;
        font-size: 5vw;
    }
</style>

{#each confetti as c}
    <span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}

隨後在main.ts文件中加載App.svelte文件並綁定組件,文件內容如下:

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

配置文件

我們打開項目的package.json文件看看,就知道這個項目依賴哪些第三方庫了,文件內容如下:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

看看效果

在項目的終端執行以下命令即可查看項目運行結果:

npm run start

如果您閱讀過Svelte的官方教程,或許對這一結果不意外,我相信您能靜下心來閱讀官方的教程,這樣有助於你進一步理解Svelte是怎麼工作的。

參考

Gif製作工具

個人總結及收穫

我們的這篇文章入門瞭如何使用Svelte構建可交互基於組件的頁面,該頁面增強了HTML的內容表達的能力,更讓我們可以藉助JavaScript或者TypeScript來提升我們的開發體驗,構建更加友好卓越的用戶體驗,提升用戶的產品價值,我相信技術帶來生產的變革,讓我們一起構建無與倫比的用戶體驗,創造更大的價值。若是我的文章對你有所啓發,那將是我莫大的榮幸。希望和您一起精進,成爲更好的自己。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章