毎回調べるのが面倒なのでVueのベースプロジェクトを作成する

特にタイトル以上に説明することもないので、進めていく。 Viteを使用しVueをインストールする 下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。 今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。 で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。 nodeのバージョンを指定する nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。 上記を実行するとpackage.jsonに、 と記入され、Volta の設定が記述されたpackage.jsonをチームで共有することで、全員の Node や npm、Yarn のバージョンを揃えることができる。 Tailwind.cssを導入する もうクラス名を考えたくないので、基本的にtailwindを使用している。 ということで本プロジェクトにデフォルトで入れる。 インストール方法は公式（Install Tailwind CSS with Vite）に従う。 Install Tailwind 下記コマンドを順に実行する。 やっていることは、tailwindのインストールと設定ファイルの作成。 Configure your template paths 続いて、パスを構成する。 tailwind.config.cjsを、 上記のように修正。 Add the Tailwind directives to your CSS 最後に、./src/style.cssにtailwindを追加する。 これでtailwindが有効になった。 SVGをコンポーネント化する SVGの取り扱いについても面倒なので、ライブラリに頼る。 いままではvue-svg-spriteを使っていたのだが、設定が面倒くさい＆今回はViteでプロジェクトを作成したので、vite-svg-loaderを入れる。 まあ、vue-svg-spriteはいろいろ設定できて便利だったけど、正直そこまでSVG使わないので。 install vite-svg-loader 上記のコマンドでインストールする。 続いて、設定していく。 vite.config.tsに 上記をインポートし、pluginsの箇所に、 を追加する。 結果的に、下記のようになっていれば問題ない。 これで設定は完了なので、あとは使用していく。 3つの使用方法 URL、文字列、コンポーネント、それぞれ３つの方法でインポートすることができる。 試しにやってみる。 下記のようにインポートして、 下記のように使用する。 デフォルトはコンポーネントなので、パラメーターが明示されていない時はコンポーネントで使用となる。 使用するのはこれくらいかしら。 コードのフォーマット系は別にまとめる。 作成したプロジェクトはこちら。