ポートフォリオ

【5分簡単】Vue.jsをインストールしてHelloWorldを表示する

簡単Vueインストール方法

Vue.jsは、UI(ユーザインタフェース)開発用のJavaScriptフレームワークの一つです。シンプルな設計と学習難易度が易しいことから、人気の高いフレームワークです。

今回は、そのVue.jsのインストール方法を紹介します。Vue.jsのインストールにはNode.js(正確にはnpm)のインストールが必要なので、Node.jsのインストール方法も同時に紹介します。

インストールからHello World表示までの流れはこちらです。

  • Homebrewをインストールする
  • nodebrewをインストールする
  • Node.jsをインストールする
  • Vue.jsをインストールする
  • Hello Worldを表示する

Homebrewのインストール

まずはHomebrewをインストールします。Homebrewとは、macOSまたは、Linux用のパッケージマネージャーです。詳しくはHomebrewの公式サイトを参照してください。

以下のコマンドをターミナルで実行して下さい。すでにインストールされている場合は、省略して下さい。

完了したら、インストールされているかを確認します。

nodebrewのインストール

次にnodebrewをインストールします。以下のコマンドを実行して下さい。

同じく、インストールされたかの確認を行います。

Node.jsのインストール

Node.jsのインストール前に、インストール用のディレクトリを作成します。このディレクトリが用意されていないとエラーになってしまうので、注意して下さい。

ls-remoteコマンドを入力すると、インストール可能なバージョン情報が表示されます。

最新バージョンをインストールする場合は、以下のコマンドを実行して下さい。

lsコマンドで、インストールされたか確認を行います。

current: noneとなっている場合は、使用するバージョンを指定する必要があります。

もう一度バージョン確認を行うと、current:に値が代入されています。

最後に、Node.jsのパスを通します。

パスを通したことで、nodeコマンドが使用できるようになりました。Node.jsがインストールされたかの確認を行います。

Node.jsがインストールされると、npmも同時にインストールされます。npmとは、Node Package Managerの略で、その名の通りパッケージ管理ツールです。Vue.jsはこのnpmを使用してインストールを行います。

Vue.jsのインストール

いよいよ、Vue.jsのインストールです。Vue.jsのインストールはVue CLIを使用します。Vue CLIとは、その名の通り、Vue専用の コマンドラインインターフェースのことです。公式ドキュメントを参考に、以下のコマンドを実行します。

これで、Vue.jsのインストールは完了です。インストールされたかの確認を行います。

次に、プロジェクトを作成します。initコマンドを実行するといくつか質問がされますが、基本YesでOKです。

作成したプロジェクトに移動し、実行します。

ブラウザでhttp://localhost:8080/」にアクセスして以下のような画面が表示されればOKです。

Welcome to Your Vue.js App

また、実行中止のコマンドは「ctrl + c」です。

Hello Worldを表示する

それでは、インストールしたVue.jsを使ってHello Worldを表示させます。http://localhost:8080/」で表示させている実ファイルは「my-project/src/components/HelloWorld.vue」です。このファイルを開き、91行目の「msg: 'Welcome To  Your Vue.js App'」を「msg: 'Hello World'」に書き換えます。

再度http://localhost:8080/」に接続すると、「Welcome To  Your Vue.js App」の表記から「Hello World」に変わりました。

Vue_HelloWorld

以上で完了です。お疲れ様でした!

 

おすすめ記事はこちら

Go言語インストール
おすすめ【5分簡単】Go言語をインストールしてHelloWorldを表示する

こんにちは!近年、多くのプログラミング言語の中で「稼げる言語」として人気が爆発しているのは、Googleが開発したGo言語です。本記事では、そのGo言語のインストール方法と、実際にプログラムを動かして、「Hello World」を表示するまでの方法を、丁寧に紹介していきます。

続きを見る

-ポートフォリオ
-,

© 2022 まいふぁんず