Vue.js プロジェクトの作成と実行

Vue.jsとは何ですか？

Vue.jsはユーザーインターフェイスを構築するための漸進的なJavaScriptフレームワークです。他の大規模なフレームワークとは異なり、Vueはボトムアップの増分開発設計を採用しています。Vueのコアライブラリはビュー層のみに集中しており、使いやすく、サードパーティライブラリや既存のプロジェクトと統合しやすいです。Vue 3はVue.jsの最新バージョンで、多くの新機能と改良をもたらし、性能の向上、パッケージサイズの縮小、TypeScriptのサポート向上などが含まれています。

Vue 3の主な特徴と利点

• Composition API：関数の組み合わせによってロジックコードを整理し、保守性と再利用性を向上させます。
• 高速なパフォーマンス：Vue 3はProxyオブジェクトを使用してリアクティブシステムを実現し、性能が大幅に向上しています。
• 小さいパッケージサイズ：Tree-shaking技術により、Vue 3のパッケージサイズはVue 2よりも小さくなっています。
• TypeScriptサポートの強化：Vue 3はTypeScriptの型定義が向上し、開発体験が向上します。
• 改善されたコンポーネントライフサイクル：新しいライフサイクルフックにより、コンポーネントのロジックがより明確で管理しやすくなります。

Vue 3を使用すると、開発者はモダンで応答性の高いウェブアプリケーションをより効率的に構築できます。

ServBayを使用したVue 3プロジェクトの作成と実行

この記事では、ServBayが提供するNode.js環境を使用してVue 3プロジェクトを作成して実行します。ServBayの『ホスト』機能を使用してウェブサーバーを設定し、リバースプロキシと静的ファイルサービスを通じてプロジェクトにアクセスできるようにします。

Vue 3プロジェクトの作成

1. プロジェクトの初期化

   まず、ServBayが提供するNode.js環境をインストールしてください。次に、以下のコマンドを使用して新しいVue 3プロジェクトを初期化します：

   cd /Applications/ServBay/www
   npm create vue@latest

   プロジェクト名（servbay-vue-appと命名することをお勧めします）を入力し、必要に応じて他のオプションを選択します：

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

2. 依存関係のインストール

   プロジェクトディレクトリに移動し、依存関係をインストールします：

   cd servbay-vue-app
   npm install

Vueプロジェクトの出力内容の変更

1. src/App.vueファイルの変更

   src/App.vueファイルを開き、出力内容を "Hello ServBay!" に変更します：

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

開発モードに移行

1. 開発サーバーの実行

   開発サーバーを起動し、ポートを指定します（例：8585）：

   npm run dev -- --port 8585

   これでローカルで開発サーバーが起動し、8585ポートが公開されます。

2. ServBayホストのリバースプロキシの設定

   ServBayの『ホスト』機能を使用して、リバースプロキシ経由で開発サーバーにアクセスします。ServBayの『ホスト』設定で、新しいリバースプロキシを追加します：

   • 名前：My first Vue dev site
   • ドメイン名：servbay-vue-test.dev
   • ホストタイプ：リバースプロキシ
   • IP：127.0.0.1
   • ポート：8585

   詳細な設定手順はNodejs開発サイトの追加を参照してください。

3. 開発モードへのアクセス

   ブラウザを開き、https://servbay-vue-test.devにアクセスしてプロジェクトをリアルタイムで確認します。ServBayはカスタムドメインと無料のSSL証明書をサポートしているため、より高い安全性が享受できます。

本番ビルドの構築

1. 本番ビルドの構築

   開発が終了したら、以下のコマンドを使用して本番ビルドを構築します：

   npm run build

   ビルドが完了すると、生成された静的ファイルはdistディレクトリに配置されます。

2. 静的ファイルサービスの設定

   ServBayの『ホスト』機能を使用して、本番ビルドにアクセスするための静的サイトを追加します。ServBayの『ホスト』設定で、新しい静的サイトを追加します：

   • 名前：My first Vue production site
   • ドメイン名：servbay-vue-test.prod
   • ホストタイプ：静的
   • ウェブサイトのルートディレクトリ：/Applications/ServBay/www/servbay-vue-app/dist

3. 本番モードへのアクセス

   ブラウザを開き、https://servbay-vue-test.prodにアクセスしてビルド後の本番バージョンを確認します。ServBayのカスタムドメインと無料のSSL証明書により、安全性と信頼性の高いウェブサイトを提供します。

以上の手順を通じて、Vue 3プロジェクトを作成し、ServBayの機能を利用してプロジェクトを管理し、アクセスすることに成功しました。