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