TWSNMP MV開発２日目：Vite+Svelte+TS+FlowBite+tailwindcssの雛形を作成

今朝は５時半から開発開始です。
昨日空のリポジトリを作成しましたが、今朝は中身の開発のために雛形を作っています。開発に使用するCapacitorのドキュメント

Capacitorのインストール | Capacitorドキュメンテーション

には、始め方の２つの方法が書いてあります。　はじめからCapacitorのアプリとして作成する方法と既存のWebアプリにCapacitorを追加する方法です。TWSNMP FKのソースコードを流用したいので、既存のWebアプリから始める方法にしました。
Webアプリを開発する時には最初にコマンドで雛形を作ります。雛形は動作するサンプルです。方法はいろいろありますが、最近気に入っているのがvite

はじめに

でSvelte + TSの環境を作るものです。

npm create vite@latest twsnmpmv -- --template svelte-ts

このコマンドだけで、Vite+Svelet+TSのソースコードができあがります。これを空のリポジトリにコピーします。README.mdだけ名前を変えておきます。README_vite.mdのようにです。
作成したソースだけで

cd twsnmpmv
npm  i
npm run dev

のコマンドを実行すれば、動きます。表示されたURLにアクセスすれば

のような画面がでます。この表示は使わないので、不要なファイルを削除します。
この状態に、Flowbiteとtailwindcssを追加します。

Quickstart - Flowbite Svelte

です。

npx svelte-add@latest tailwindcss
npm i
npm i -D flowbite-svelte flowbite

で完了です。
tailwind.config.cjsとApp.slvelteをQuickstratに記載の内容に書き換えれば、

のような画面になります。
今朝の作業は

の上から３つのコミットです。

明日に続く