# プロジェクトの作成
# create-vue でのプロジェクト新規作成
create-vue (opens new window) を使って生成されるアプリケーションをプロジェクトと呼びます。ここではプロジェクトを新しく作成してみましょう。
アプリケーションを作成するディレクトリを決めておきます(この例では
vue3-lab
としています)。create-vue
でプロジェクトを作成すると、決めたディレクトリの配下にファイル群が生成されます。ターミナルで、プロジェクトのディレクトリを作成する親ディレクトリに移動します。もし、ホームディレクトリの直下にプロジェクトを作成するのであれば、ターミナルで以下のコマンドを使って移動しておきます。
cd ~
ヒント
ホームディレクトリとは、ユーザー固有のファイルやフォルダを保存できる領域であり、通常ユーザー名でディレクトリが作成されています。
create-vue
でプロジェクトを新規作成します。ターミナルで以下のコマンドを実行します(コマンド実行後はそのまま待機しておいてください)。プロジェクトのディレクトリはcreate-vue
によって自動的に作成されます。npm init vue@3 vue3-lab
コマンドを実行すると、ターミナルにいくつかの質問が表示されます。このハンズオンでは以下のように選択します。
Need to install the following packages: create-vue@3 Ok to proceed? (y) -> y
ヒント
y を入力し、enter / return キーで確定ができます。
Vue.js - The Progressive JavaScript Framework Add TypeScript? … No / Yes -> No Add JSX Support? … No / Yes -> No Add Vue Router for Single Page Application development? … No / Yes -> No Add Pinia for state management? … No / Yes -> No Add Vitest for Unit Testing? … No / Yes -> No Add Cypress for both Unit and End-to-End testing? … No / Yes -> No Add ESLint for code quality? … No / Yes -> No
ヒント
矢印キーで移動、enter / return キーで確定ができます。
# プロジェクトの起動
作成したプロジェクトを起動してみましょう。プロジェクトの起動には外部パッケージをインストールしてから起動コマンドを実行します。
作成したプロジェクトのディレクトリに移動し(この例では
vue3-lab
)、npm install
で外部パッケージをインストールします。cd vue3-lab npm install
npm install
の処理が完了したらnpm run dev
でプロジェクトを起動します。npm run dev
npm run dev
の実行が完了したら、ブラウザでhttp://localhost:5173/
にアクセスします。ブラウザに「You did it!」等と表示されていれば、無事にプロジェクトの作成が成功しています。