LoginSignup
84
80

More than 3 years have passed since last update.

【Vue.js】10分でできる! ~ Vue.jsのインストール → プロジェクト作成と起動まで~

Last updated at Posted at 2020-04-18

WindowsにおけるVue.jsをインストール → プロジェクト作成までの手順です。
必要なツールのインストール → プロジェクトの作成、起動まで10分あればできちゃいます♪

環境

  • Windows 10

※以下、本記事の手順でインストールします(2020年4月18日現在)。

  • Vue.js:v2.6.11
  • @vue/cli:v4.3.1
  • Node.js:v12.16.2
  • npm:v6.14.4

用語と解説

用語 解説
Vue.js JavaScriptをベースとしたUI構築のためのプログレッシブ(先進的な)フレームワーク
@vue/cli Vue.jsで開発をするためのツール
CLIはもちろん、GUIも提供している
Node.js サーバーサイドで動くJavascript
WindowsではインストーラによるNode.jsのインストールでnpmもインストールされる
npm Node Package Managerの略
Node.jsのパッケージを管理するためのもので、
@vue/cliの使用に必要

手順

1. Node.js(npm)のインストール

@vue/cliを使用するためには、npmが必要。
Windowsではインストーラによる、Node.jsのインストールで、npmもインストールされる。
というわけでまず、Node.jsをインストールします。

  1. Node.js公式サイトにアクセスし、インストーラをダウンロードします。特別な理由がない限り、LTS(推奨版)にするのがよいでしょう。 image.png

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

インストール開始までは基本的に「Next」を押していくだけでOK。
補足の必要な箇所のみ、キャプチャをつけて解説していきます。

3.インストーラ起動から2画面めです。
内容を確認し、「I accept the terms in the License Agreement」にチェックを入れ、「Next」をクリックしましょう。
image.png

4.インストーラ起動から5画面めです。
「Automatically install the necessary tools.・・・」にはチェックを入れずに「Next」
image.png

※チェックを入れるとNode.jsインストール終了後に、関連ツールのインストールも始まり、時間がかかる&エラーが出ることもあって手間なので、今回はパスします。

5.インストールが完了したら、コマンドプロンプトを起動し、Node.jsとnpmのバージョンを確認しておきましょう。

■実行コマンドと想定結果(Node.js)

> node --version
v12.16.2

■実行コマンドと想定結果(npm)

> npm --version
6.14.4

ここまでで約5分です。

2. @vue/cliのインストール

続いて、Vue.jsの開発ツール@vue/cliのインストールです。

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

> npm install -g @vue/cli

-g により、グローバルインストールとなり、システムディレクトリにインストールされるそうです。
忘れると、エラーの原因になりますので注意しましょう。

2.完了したら、@vue/cliのバージョンを確認します。
■実行コマンドと想定結果

> vue --version
@vue/cli 4.3.1

補足事項

@vue/cliデフォルトでは、最新版がインストールされますが、バージョンを指定してインストールすることも可能です。
その場合は、@vue/cliのうしろに有効なバージョンを付与します。
例えば、以下の通り。

> npm install -g @vue/cli3.7.0

なお、バージョンアップしたい場合は、対象のバージョンを指定して再度インストールコマンドを実行します。
最新版にしたい場合はバージョン指定しなくてOK!

@vue/cliのインストールは2分もあれば十分。

3. プロジェクトの作成と起動

1.コマンドプロンプトで任意のパスに移動し、以下のコマンドを実行します。

> vue create プロジェクト名

なお、半角英数字と一部記号(小文字のみ)以外を使うとエラーになりますのでご注意を。

2.以下のように選択肢が出ます。今回は、「default (babel, eslint)」のままEnter。
※上下矢印キーで切り替えができます。

? Please pick a preset:
> default (babel, eslint)
  Manually select features 

3.完了したら、作成したプロジェクト配下に移動します。
■実行コマンド

> cd プロジェクト名

4.せっかくなので、vueのバージョン確認もしておきましょう。
■実行コマンドと想定結果

> npm list vue
プロジェクト名@XXXフォルダパス
`-- vue@2.6.11

上記の場合は2.6.11がVue.jsのバージョンとなります。

5.プロジェクトを起動します。
■実行コマンドと想定結果

> npm run serve

「DONE Compiled successfully」と出れば、正常に起動できています。

6.ブラウザでhttp://localhost:8080/にアクセスし、以下のようなページが表示されたら、成功です!
image.png

デフォルトでのプロジェクト作成→起動なら、3分かからないはず!

補足事項

作成したプロジェクトのプラグインをアップグレードする場合は対象プロジェクト配下にて、以下のコマンドを実行します。
■実行コマンド

> vue upgrade

終わりに

いかがだったでしょうか。
Vue.jsで開発するための最低限の準備がたった10分でできました。
これをベースに開発を進めていきましょう~!

参考

なお、トラブル発生時は、以下も参考になりました↓

84
80
0

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
84
80