投稿日: 投稿者: チキンキウイ

Windows環境のCursorでVue3開発環境を作ってみる

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はAI機能を搭載したコードエディタCursorでVue3の開発環境を作ってみたので紹介します。

必要なもの

・Node.js
・Cursor
・Vue3
・Vue Router

Node.jsのインストール

公式サイトよりインストーラを取得
記事作成時最新は「24.12.0(LTS)」
Windowsインストーラをダウンロード

インストールウィザードに沿ってインストール、特にこだわりがなければすべてNextでOK

以下も基本的にNextで大丈夫ですが、今後Node.jsのいろいろなモジュールを使用した場合は
チェックを入れておくといいです。
今回の環境では不要です。

以上でNode.jsが準備できました。

Cursorのインストール

公式サイトよりインストーラーを取得します。
記事作成時最新は「2.2.44」
とくにこだわりがなければ、インストーラーデフォルト設定のままインストールでOK
インストール後、ログインが求められるのであらかじめ公式サイトのログインからアカウント登録しておくとスムーズに進みます

Cursorに拡張機能の追加

Cursorに以下の拡張機能を追加します

  • Japanese Language Pack for VS Code
    • 日本語化
  • npm
    • npmのサポート
  • Npm Intellisense
    • importステートメント内のnpmモジュール自動補完
  • Vue (Official)
    • Vueのサポート
  • Vite
    • Vue開発サーバーのサポート

Vue3プロジェクトを作成

ファイル > フォルダーを開くでプロジェクトを作成したい場所を開く

[Ctrl + @]でコンソールを開く

コンソールで以下のコマンドを実行しプロジェクトを作成

npm create vue@latest

yを入力

お好きなプロジェクト名、パッケージ名を入力

追加したいパッケージを選択します

実行してみる

  • TypeScript
    • 必ず追加
  • JSX Support
    • JSX/TSX で Vue を書くための機能、React風に書きたい場合は追加
    • 今回はOFF
  • Router
    • 画面遷移に必須
    • 必ず追加
  • Pinia
    • 状態管理ライブラリ
    • ログイン情報・ユーザー情報・共通データなどを扱う場合は追加
  • Vitest
    • 単体テスト自動化するなら追加
  • End-to-End Testing
    • ブラウザ操作を含むテストを自動化するなら追加
  • ESLint
    • コードの書き方チェック
    • 必ず追加
  • Prettier
    • コード自動整形
    • 必ず追加

実験的機能を使うか聞かれる今回は使用しないため初期のままEnter

サンプルコードを省略して作成するか確認されるので今回は「No」を選択し
サンプルコードを追加

プロジェクトの作成が始まり完了するとプロジェクトフォルダが作成される

作成したプロジェクトフォルダをcursorを開きなおし以下のコマンドを実行

PS C:\vue3\startupVue> npm install

依存関係のインストールが完了すればプロジェクトの準備完了

Vueの起動

以下のコマンドを実行すると開発サーバーを実行することができます

npm run dev

起動に成功すると以下の画面が表示される

コンソールに[q]を入力することでサーバーを停止できます

以上、CursorでVue3の開発環境を構築してみました。
興味が持てましたら自分のPCにも構築してみてください。