14
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue.js環境構築

Last updated at Posted at 2024-06-06

1. Node.jsをインストール

1.Node.js公式サイトにアクセスし、インストーラをダウンロードする。
https://nodejs.org/en/
image.png

2.ダウンロードできたら、ダブルクリックしてインストーラを起動する。
image.png

image.png

基本的には「Next」で進めていけば問題ない。
image.png
ここまで問題なければ、「Install」を選択する。
下記画面になればインストール完了!!

image.png

3.インストールが完了したら、コマンドプロンプトを起動し、Node.jsがインストールされていることを確認する。
↓実行コマンドと想定結果

> node -v
v20.14.0

このようにバージョンが表示されたらインストール成功!!

2.Vueファイルを作成する

1.コマンドプロンプトで以下のコマンドを実行する。

> npm create vue@latest

以下のようにオプションを設定する項目が表示されるので、必要に応じて選択する。

image.png
すべて選択したら以下のように開発フォルダ内にProject nameで設定した名称(今回はVue_project)のフォルダが追加される。
image.png

3.npmをインストール

1.下記コマンドを実行する。

> npm install

2.npmがインストールされているか確認する。
↓実行コマンドと想定結果

> npm -v
10.7.0

4.ローカルサーバーを起動する

> npm run dev

コマンドを入力したら以下のようにターミナルに表示される。
image.png
このhttp://localhost:○○○○/というのがローカルサーバーにアクセスできるURL
下記のようにVueのページが表示されれば、環境構築完了~!!

image.png

14
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?