Zenn
Open11

svelteでアプリを作るログ

toketoke
# アプリ名を指定してsvelteで作る
npx sv create my-app

# いろいろ聞かれるので答える
◇  Which template would you like?
│  SvelteKit demo
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint, tailwindcss
│
◇  tailwindcss: Which plugins would you like to add?
│  typography, forms, container-queries, aspect-ratio
│
◇  Which package manager do you want to install dependencies with?
│  bun
toketoke

sveleteではファイルの命名規則が +page.svelteとつけないといけない
https://kit.svelte.jp/docs/routing

.svelteファイルでルーティングを設定できるんだけど、
aria-currentプロパティにこういうの書かんといけない。
liタグ + aタグなので、単純にaタグ生成しているだけだと思うが

			<li aria-current={$page.url.pathname.startsWith('/test') ? 'page' : undefined}>
				<a href="/test">test!</a>
			</li>
toketoke

こんな感じで必要なやつだけ入れて使う感じ

npm install --save-dev @smui/button
toketoke

sveltekit使うとデフォルトでtailwind使えるのでこれで良いのかな

toketoke

色々svelteのこと調べたけど、個人アプリとかはsvelteで作る人多いみたい
周辺のライブラリはreactが優ってるっぽい

toketoke

vercelにデプロイすると簡単。
https://kit.svelte.jp/docs/adapter-auto

ライブラリをインポートして、vercelからポチポチしたらデプロイ完了

下記をインストールしてデプロイすればok

npm i -D @sveltejs/adapter-vercel