Vue.jsのインストール方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのインストール方法について、簡単に解説していきます。

直接組み込みでインストールする方法

公式ページからVue.jsをダウンロードします。

<script src="/js/vue.js"></script>

上記のようにHTMLでjsファイルを読み込みます。

なお、開発環境用と本番環境用があるため、分けて使うと良いでしょう。

CDNでインストールする方法

必ずしもVue.jsをダウンロードする必要はありません。

CDNを利用して、毎回外部サーバから読み込む方法もあります。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

CDNを利用する場合も開発環境用と本番環境用で使い分けます。本番環境の場合は、上記のようなURLになります。

CLIでインストールする方法

Vue CLIを利用する場合、先にNode.jsをインストールして以下のコマンドが機能することを確認します。

node --version
npm --version

次に、以下のようにnpmコマンドを使って、-gオプションを付け、グローバル環境にVue CLIをインストールします。

npm install -g @vue/cli

以上のコマンドだけでVue.jsがインストールされているはずですので、以下のコマンドを使って、インストールの確認をします。

vue --version