みおもん倶楽部 技術雑記

世界の片隅で、諜報活動と称して本を読んだりゲームをしたり

ViteでSvelteを始めてみる

ViteでSvelteをざっくり動かしてみる

create-viteパッケージをインストール

npm install -g create-vite

svelteプロジェクトを作成する

create-vite my-svelte-app --template svelte

ディレクトリに移動

cd my-svelte-app

依存をインストール

npm install

開発サーバを起動

npm run dev

以下のアドレスとポートでWebサーバプログラムが起動するので、アクセスしてみる。 ポートは環境によって変わるかもしれないので、ターミナルのメッセージを確認。

npm run devの結果

http://localhost:5173/

表示されたアドレスにアクセス。"Count is XXX"をクリックすると値が増える。

コンポーネントを作成

./my-svelte-app/src/lib/Hello.svelte を以下のように作成。

Hello.svelteを追加してみる

5行目と23〜25行目を追加

もう一度以下にアクセスすると、画面が少し変わる

http://localhost:5173/

Click meが増えている

Click meをクリックしてみると

予想通り、alert関数が実行される