Ubuntu19.10にsvelteをインストールして利用してみる

Ubuntu19.10にsvelteをインストールして利用してみる

Reactやvueの何倍も速いと言われているsvelteをインストールしてみる。思ったより使いやすい印象です

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

※ubuntu19.10にnodeのインストールはこちら

svelteインストール

## プロジェクトの作成
npx degit sveltejs/template svelte-project

svelteを起動する

## プロジェクトに移動
cd svelte-project

## インストール
npm install

## 実行
npm run dev

http://localhost:5000 にブラウザからアクセスしてみると

「Hello World!」が表示される

svelte-project/src内のApp.svelteを下記のように変更して

<script>
	export let name;
	export let name2;
</script>

<style>
	h1 {
		color: red;
	}
</style>

<h1>Hello {name}!</h1>
<h1>こんにちは {name2}!</h1>

svelte-project/src内の main.jsを下記のように変更します。

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world',
		name2: '世界'
	}
});

export default app;

もう一度、 http://localhost:5000 にブラウザからアクセスすると反映されていることが確認できます。