Vue.jsインストール、プロジェクトの作成

Vue.js
2024.06.25

Vue.jsは、UIとSPA（Single Page Application）の構築を容易にするために設計されたオープンソースのJavaScriptフレームワークです。2014年にエヴァン・ユーによって作成され、宣言的なデータバインディングとコンポーネントベースのアーキテクチャを提供します。

  • 双方向リアクティブバインディング: データとDOMが双方向に同期されるため、データ変更が自動的にDOMに反映されます。
  • コンポーネントベースのアーキテクチャ: 再利用可能なコンポーネントでコードを分割することで、コードの管理が容易になり、スケーラビリティも向上します。
  • ディレクティブ: v-bind、v-model、v-for、v-ifなどを使用して、HTMLテンプレート内で簡潔にデータバインディングや条件分岐を記述できます。
  • ツールサポート: Vue CLIを使用することで、プロジェクトのセットアップやビルドプロセスが簡単になります。

Vue.jsの利用方法

CDN（コンテンツデリバリネットワーク）を使用する

Vue.jsを簡単に試す方法として、CDNを使用してスクリプトをHTMLファイルに読み込む方法があります。この方法は、小規模なプロジェクトや試験的な開発に最適です。特別なセットアップやビルドツールが不要で、すぐにVue.jsを使い始められます。
Vue 2 の例

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
  </script>
</body>
</html>
HTML

Vue 3 の例

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 3 Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue.js 3!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>
HTML

npmを使用する

npm init vue@latest

このコマンドは、Vue.js プロジェクト全体を テンプレート 付きでセットアップします。

  1. npm init vue@latest：プロジェクト作成。
  2. cd vue-project: 作成したプロジェクトのディレクトリに移動します。
  3. npm install: 依存関係をインストールします。
  4. npm run dev: 開発サーバーを起動し、プロジェクトをブラウザで確認します。

挙動

  • 目的: 新しい Vue.js プロジェクトを迅速に作成する。
  • 前提条件: プロジェクトフォルダが空であることが推奨されます（既存のフォルダに実行すると競合する可能性あり）。
  • 結果:
    • Vue.js の依存関係を含む package.json が生成される。
    • 必要なフォルダ構成（例: src フォルダ、vite.config.js）が作成される。
    • vite がインストールされ、開発サーバーも設定される。

ウインドウズ：プロジェクトを削除したいときrmdir /s /q プロジェクト名で削除できます。

プロジェクト作成時のオプションの選択

最初は、初期設定で全て「No」を選び、シンプルな構成で始めるのがおすすめです。その後、必要に応じてVue Routerを導入し、複数ページの対応を学びます。さらに、ESLintとPrettierを追加してコードの品質向上とフォーマット整形を自動化すると、開発効率が上がります。

その後必要に応じてTypeScriptやE2Eテストなど追加してみるのが良いでしょう。

npm install -g @vue/cli

このコマンドは、Vue CLI（コマンドラインツール）をインストールします。Vue CLI はフレームワークではなく、Vue.js プロジェクトを作成するためのツールです。通常、グローバルにインストールすることで、どのディレクトリからでも Vue CLI のコマンドを実行できるようになります。

  • Vue CLI のインストールまず、Vue CLI をグローバルにインストールします。
npm install -g @vue/cli
Bash
  • Vue CLI がインストールされたか確認するには、以下のコマンドを実行します。
vue --version
Bash

挙動

  • 目的: Vue.js プロジェクトを作成および管理するためのツールをインストールする。
  • 前提条件: Node.js と npm がインストールされている必要があります。
  • 結果: Vue CLI がインストールされ、vue create や vue ui などの CLI コマンドが使用可能になります。

Vue CLI は、Vue.js プロジェクトを効率的に作成・管理するためのコマンドラインツールです。同じような目的を持つツールには、（Next.js や Create React App など）のようなものがあります。

Vue CLI を使って新しいプロジェクトを作成する手順

  • プロジェクトの作成次に、プロジェクトを作成します。
    • プリセット（Vue 2 または Vue 3）を選択します。
    • 追加機能（Router、Vuex など）を選んで設定します。
vue create my-vue-project
Bash
my-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   ├── logo.png
│   ├── components/
│   │   ├── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
├── vue.config.js
Bash
  • プロジェクトディレクトリに移動プロジェクト作成後、ディレクトリに移動します。
cd my-vue-project
Bash
  • 開発サーバーを起動開発サーバーを起動して、ローカルで確認します。
npm run serve
Bash

これで、Vue.js アプリケーションをローカルで確認できます。

Vue CLIを直接インストールせずに使用する

npm install -g @vue/cliのコマンドを実行せず使用します。Vue CLI が ローカルにインストールされていない場合、npx を使うことで、インストールされていないパッケージも自動的にダウンロードして実行できます。実行後、そのパッケージは自動的に削除されるため、インストールなしで使うことができます。

npx vue create my-vue-project
Bash
404 NOT FOUND | ローカルサイト
v2.pretty-cute.info

コメント

タイトルとURLをコピーしました