最初、Next.js＋Reactで環境構築しようと思ったんですが、Vercel以外のホスティングでデプロイするのが結構手間っていう話を聞いたので、今回はNuxt.js＋Vue.jsで環境作ってみようかなって思います。

Node.jsをインストール

Nuxt.jsはNode.jsのフレームワークなので、先にNode.jsをインストールしましょう。
Windowsの場合は、Node.jsのホームページからインストーラーをダウンロードできます。

インストールウィザードに従ってNode.jsをインストールした後、PowerShellで以下のコマンドを実行して、バージョンが表示されたら、インストール出来て、パスも通っています。

$ node -v

npmをインストール

パッケージ管理にはnpmを使用します。

$ npm -v

Nuxt.jsプロジェクトを作成

Nuxt.jsのプロジェクトは以下のコードで作れます。

$ npx nuxi init {プロジェクト名}

text-appというプロジェクト名なら以下のコマンドになります。

$ npx nuxi init test-app

Need to install the following packages:
nuxi@3.16.0
Ok to proceed? (y)

プロジェクトを作成する過程で、いくつか聞かれます。

Which package manager would you like to use?

途中でパッケージマネージャーは何使う？って聞かれるので、npmを選んでおきましょう。

Are you interested in participating?

データ収集に協力しますか？には、好きな方を選ぶと良いです。

$ cd test-app

$ npm install

仮想サーバーを立ち上げ

$ npm run dev

これで開発用の仮想サーバ－が動くので、http://localhost:300/で接続できるようになります。
node.js系は簡単で良いですね。

Nuxt.jsはVue.jsベースなので、編集はapp.vueから行います。