在完成安裝以及建立一個新專案後我們準備開始撰寫第一個程式碼了。
本文同步放置於此
在開始撰寫之前要讓所有讀者知道，之所以可以這麼方便的進行開發是因為有其他人幫忙建立一個初始設定，所以我們才能專注在邏輯以及畫面呈現上開發。
而svelte的原理是透過編譯器將我們所寫的程式轉譯成純javascript的程式碼，之後再我們的index.html使用這個編譯後的javascript即可渲染成我們要呈現的畫面，因此有興趣的朋友們可以先看一下rollup.config.js，預設是用rollup來處理這工作，大家也可以試著修改成webpack或babel來編譯，最後幾天筆者會再說明一下。
在了解其運作原理接下來要開始撰寫程式碼了。
這是使用者的進入點，基本上格式是固定的，簡單說明就是宣告header，使用編譯後的javascript以及css接下來的動作就交由編譯後的javascript處理。所以index.html如下所示。
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/bundle.css'>
<script defer src='/bundle.js'></script>
</head>
<body>
</body>
</html>
這個就是程式的進入點，所有副檔名為svelte都是我們所需專注的svelte程式碼，今天先簡單寫一下hello world，其程式碼如同下列所示。
<script>
let name = 'kirai';
</script>
<h1>Hello {name}!</h1>
這部分就是告訴html要怎麼進到App.svelte詳情請看以下程式碼。
import App from './App.svelte';
var app = new App({
target: document.body
});
export default app;
在撰寫完之後在vscode的終端機輸入以下指令即可看到開發中畫面，再來如果修改儲存後會自動刷新，相信對於大家開發有一定的幫助。
不過這僅是開發模式，在後面的日子再跟大家分享如何製造發佈的版本。
今天跟大家介紹svelte的運作原理，以及程式的結構，在明天再跟大家進一步說明svelte的程式碼。
iThome鐵人賽
看影片追技術