単純明快！3通りの方法で環境を構築してみよう！

環境構築方法の紹介

Vue.js には、いくつかの環境構築方法が存在します。この記事では、以下の 3 つの方法で Vue.js を環境構築する方法について解説します。

CDN を利用する方法
Vue CLI を利用する方法
Vite CLI を利用する方法

CDN を利用する方法

CDN とは、キャッシュサーバーを利用することで、サーバーの負荷を肩代わりしてくれるシステムのことです。 Vue.js の開発者が、Vue.js の本体を CDN に置いているので、Vue.js をダウンロードする手間がなく、容易に利用することができます。

以下のように、HTML の script タグ内に CDN の URL を記述することで、Vue.js を利用することができます。

<script src="https://unpkg.com/vue@next"></script>

<html>
  <head>
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div id="intro" style="text-align: center">
        <h1>{{ message }}</h1>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

Vue CLI を利用する方法

Vue.js を使用する大規模なアプリケーションの場合、NPM パッケージを使用してインストールすることをお勧めします。 Vue CLI は、開発に役立つツールが付属しており、Browserify や Webpack を使用することができます。

https://nodejs.org/ja/download/

以下は、 NPM を使用してインストールするコマンドです。

npm install vue

Vue.js は、CLI を提供しています。CLI を使用するには、次のコマンドを使用して CLI をインストールする必要があります。

npm install --global vue-cli

CLI を使用してプロジェクトを作成するには、次のコマンドを使用します。

vue init webpack myproject

プロジェクトの設定は対話ベースで行います。質問内容がわからない場合は、適当に設定してしまっても問題ありません。

Project Name
Project descripton
Author
Use Build
Install vue-router?
Use ESLint to lint your code?
Pick an ESLint preset
Setup unit tests with karma + Mocha?
Setup e2e tests with Nightwatch?

1 分ほどでプロジェクトが完成されるかと思います。
以下コマンドで起動してみましょう

cd myproject

npm install

npm run dev

プロジェクトが立ち上がったら http://localhost:8080/#/ にアクセスして確認しましょう。

Vite 利用する方法

Vue.js 環境を構築する方法として Vite を使用する方法もあります。

使用方法は非常に簡単で、 CLI で以下の NPM コマンドを実行し Vite を実行します。

npm init vite@latest

実行すると対話ベースでプロジェクトの設定をします。設定内容は以下の通りです。

ProjectName プロジェクト名を設定します。ここでは vite-project を入力します。
Select a framework 使用するフレームワークを設定します。ここでは Vue を選択します。
Select a variant 使用するプログラム言語や追加フレームワークを選択します。ここでは JavaScript を選択します。

次に以下コマンドを順次実行してください。

// カレントを移動
cd vite-project

// モジュールのインストール
npm install

// Vue.js の起動
npm run dev

実行が完了するとアプリケーションが立ち上がります。以下 IP アドレスにアクセスし以下画面が表示されたら成功です。http://127.0.0.1:5173/

おまけ(Web ツールを使う方法)

JavaScript を操作・実行できる Web ツールがを利用する方法があります。

終わりに

この記事では、Vue.js の環境構築方法を 3 つ紹介しました。CDN を使用する方法や Vue CLI を使った方法、Vite CLI を使用した方法について解説しました。また、Web ツールを使用する方法についても紹介しました。

それぞれの方法にはそれぞれ特徴がありますので、自分にとって使いやすい方法を選んで学習を進めることをおすすめします。Vue.js を用いることで、簡単かつスムーズにシングルページアプリケーションを作成することができます。

Vue.js は他のフレームワークに比べて、比較的簡単に学習することができます。しかし、その分多機能で、使いこなすには時間がかかる場合があります。是非、本記事を参考にして、Vue.js を楽しんでください。

単純明快！3通りの方法で環境を構築してみよう！

環境構築方法の紹介 #

CDN を利用する方法 #

Vue CLI を利用する方法 #

Vite 利用する方法 #

おまけ(Web ツールを使う方法) #

終わりに #