今天的越寫悅快樂之系列文章爲大家帶來如何快速開啓一個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製作工具
- QuickTime Player
- Gifski
個人總結及收穫
我們的這篇文章入門瞭如何使用Svelte構建可交互基於組件的頁面,該頁面增強了HTML的內容表達的能力,更讓我們可以藉助JavaScript或者TypeScript來提升我們的開發體驗,構建更加友好卓越的用戶體驗,提升用戶的產品價值,我相信技術帶來生產的變革,讓我們一起構建無與倫比的用戶體驗,創造更大的價值。若是我的文章對你有所啓發,那將是我莫大的榮幸。希望和您一起精進,成爲更好的自己。