svelte是react和vue之外的另一个选择。
创建一个svelte应用很容易：
npx degit sveltejs/template todolist
cd todolist
npm install
npm start dev它会启动5000端口，打开后，是这样的效果：
为了在vscode里有提示，需要在vscode里安装Svelte for VS Code。
为了有更好的提示，输入一条命令，让它支持typescript：
node scripts/setupTypeScript.js
npm install
npm run dev这个时候，它已经支持typescript了。
创建srcstores.ts，在这里设置todolist的list：
import { writable } from 'svelte/store';
interface Todo{
done:boolean,
text:string
}
const todo:Todo[]=[
{
done:true,
text:'test-1'
},{
done:false,
text:'test-2'
}
]
export const list_store = writable(todo);然后，在srcApp.svelte中，导入list：
import { list_store } from './stores.ts';由于list_store是一个对象，因此还需要再设置一个变量：
let list:Todo[];并取得值：
const unsubscribe = list_store.subscribe((value) => {
list = value;
});此时，就可以用循环，把todo给列出来：
{#each list as todo}
{/each}此刻的效果是：
接下来增加对checkbox的事件处理：
on:change={() => {
todo.done = !todo.done;
}}同样，还需要对input文本输入进行处理：
on:change={(event) => {
todo.text = event.target.value;
}}接下来，增加一个添加按钮，和一个删除按钮。
还要有一个显示状态:
{remaining} remaining
remaining是这样定义的：
$: remaining = list.filter((t) => !t.done).length;srcApp.svelte全部代码如下：
todo list
{#each list as todo}
{
todo.done = !todo.done;
console.log(todo.done);
}} />
{
todo.text = event.target.value;
}}
placeholder="What needs to be done?"
value={todo.text} />
{/each}
{remaining} remaining
效果如下:
如果为了UI好看一些，还可以使用svelte-material-ui：
npm install --save-dev svelte-material-ui
npm i -D rollup-plugin-postcss node-sass
mkdir src/theme
touch src/theme/_smui-theme.scss然后，更改rollup.config.js文件：
新增：
import postcss from "rollup-plugin-postcss";找到：
commonjs(),回车，增加如下内容:
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules'
]
}]
]
}),最后，全部代码位于：