git cloneしてもいいし、degitでもいいです
npx degit loop0429/svelte-session {project_name}
cd {project_name}
環境構築(npmな人はnpm脳で読んで)
yarn install
yarn dev // 開発 http://localhost:5000
yarn build // 本番用ビルド
簡単に構造説明
書かれてないものはテキトウに読んで調べてください。
src/App.svelte: メインです。src/routes/*.svelte: 各ページのコンポーネントです。
基本的にコンテンツはsrc/constants/の{同一ファイル}.jsに記述して、レイアウトに関する記述がメインです。src/constants/page.js:svelte-spa-router用のルーティング設定です。src/components/page/Page.svelte:src/routes/*.svelteのコンテンツを読み込んでいますFadePage.svelte: ページ切り替えしたときにFadeの効果が付与されます。上記Page.svelteをwrapしています。ScalePage.svelte: ページ切り替えしたときにScaleの効果が付与されます。上記Page.svelteをwrapしています。
ページの操作方法
- 右キーで次のページへ、左キーへ前のページへ
- Enterキーでページ内でコンテンツ切り替え。ページによってはあるなしがあるので、テキトウに操作してください
注意事項
build時、PurgeCssで使用されてないTailwind CSSを除外する設定にしていますが、src/components/*内で使用してるクラスが除外されてしまっています。
階層の深さが問題かと思って他のプロジェクトで同一のディレクトリ構造で試してみたら、思った通りの動作をしていたのでsvelte-spa-routerのせいかもしれない。svelte/storeを使用したstore.jsをimportするとeslintで怒られたので、各ページで/* eslint-disable import/first */を追記してます。transitionを使用する際に、transition:fadeのようにすると、inとoutの両方が適用されます。
そうするとunmountされる際（今回の場合、ページ切り替え時）に、outのtransitionが実行されます。
なので、in:fadeのような記述の仕方をしています。
