【Vue.js入門】インストールしてブラウザに表示

今回は、Vue.jsを使用するに当たって、必要なファイルをインストールして、Vueをブラウザに表示するところまでをご紹介いたします。

Node.jsとNPMをインストール

公式サイトからNode.jsとNPMをインストールします。
https://www.npmjs.com/get-npm

 

vue.js npm

下にスクロールして、ダウンロードボタンをクリックして、インストールを進めてください。

vue.js npm

Macならターミナル、Windowsではコマンドプロンプトで、 node.js と npm がインストールされた事を確認します。

node -v

バージョンが表示されていればインストールされています。

12.16.2

npmも同様に確認します。

npm -v

v6.14.4

Vue CLIをインストール

次にVue CLIをインストールします。

npm i -g @vue/cli

Vueプロジェクトの作成

Vueのプロジェクト名をつける

コマンドラインでプロジェクトを構築します。
my-first-vue というプロジェクト名を付けました。

vue create my-first-vue

Vueプロジェクトを構築する

Manually select features を選択します。

vue.js

カーソルの上下で移動し、スペースで選択できます。

選択できなかった場合は、キーボードが全角入力になっているのかもしれません。半角入力に変えて試してください。

次に必要なプリセットを選択する画面になります。
今回は、Babel、Router、Vuex、Linter / Formatterを選択しました。

キーボードの Enter を押して進めます。

vue.js

Yesである、yを入力して、Enter で進めます。

vue.js

今回は、ESLint + Prettier を選択して進めます。

vue.js

Lintセーブを選択のまま、Enter で進めます。

vue.js

In dedicated config files が選択されていますので、そのまま進めます。

vue.js

プリセットとして、保存するかを聞かれます。今回は保存しないので、Nを選択します。

vue.js

Vueプロジェクトの構築が始まります。

vue.js

Vueプロジェクトの構築が完了すると、次のように表示されます。

vue.js

Vue.jsのプロジェクトを表示

cdでVueのプロジェクトフォルダがあるディレクトリーへ移動します。

cd my-first-vue

Vueを起動させます。

npm run serve

vue.js

ブラウザのアドレスバーに次を入力しましょう。

http://localhost:8080/

Vueがブラウザに表示されます。

vue.js

まとめ

今回は、Vue.jsのインストール方法を書きました。
このようにVueは、簡単に始めることができます。
最後までお読みいただきありがとうございました。

 

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください