こんにちは。つばさです。
最近よくViteをよく使っていていい感じなので、他に書くこともないのでタイトルに書いてあるとおり、
「ViteでVue3 + VueRouter + TailwindCSSの環境をつくる」をやっていきたいと思います。
といっても、公式ドキュメントにそってやっていくだけですが。
あまり詳しく書くのは面倒なので、ざっくり説明していきます。
Viteは、プロジェクト生成ツールで、「ヴィート」と呼びます。いろいろ動作が早いです。
必要な環境としては、npmを使うので、node.jsをインストールする必要があります。
なので、node.jsを事前にインストールしてください。(インストール方法は、面倒なので説明しません）
ではまずプロジェクトを生成します。ちなみにMacでやっていますが、Windowsでも同じようにできます。
下記コマンドを実行します。
npm init vite@latest今回はプロジェクト名をskl-blogにしました。今回はVueを使うのでフレームワーク選択でVueを選択していますが、他にもreactや最近注目されているSvelteもあります。
Typescriptも可能です。
プロジェクトの生成が完了すると下記のように表示されるので、素直に実行していきます。
下記コマンドを実行します。
cd skl-blog
npm install
npm run dev実行すると下記のようにURL「http://localhost:3000/」が表示されるのでブラウザで確認します。
下記のようにブラウザに表示されればOKです。
これでVueを使う環境はできました。
つぎはVueRouterを導入していきます。が、macだからなのかコードがインデント込でうまくブログにコピペできなくて時間がかかりそうなので、
次回、VueRouter、TailwindCSSを導入していきたいと思います。
次回がいつになるかわかりませんが、反響が大きければ早く書くかも。