Vue.js プロジェクトの開始方法

1. Node.jsとVue

1.1 ノード

• Node.js は、Chrome V8 エンジンをベースにした JavaScript ランタイム環境です。 Node.js は、イベント駆動型の非ブロッキング I/O モデルを使用します。
• 【Node は JavaScript をサーバー上で実行できるようにする開発プラットフォームであり、JavaScript は PHP、Python、Perl、Ruby などのサーバーサイド言語と同等のスクリプト言語になります。 2009 年 5 月にリリースされ、Ryan Dahl によって開発され、本質的には Chrome V8 エンジンのラッパーです。
• Node はいくつかの特殊なユースケースを最適化し、ブラウザー以外の環境で V8 をより適切に実行するための代替 API を提供します。 V8 エンジンは JavaScript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。 Node は Chrome JavaScript ランタイム上に構築されたプラットフォームであり、応答が速く、簡単にスケーラブルなネットワーク アプリケーションを簡単に構築するために使用されます。 Node は、軽量かつ効率的なイベント駆動型の非ブロッキング I/O モデルを使用しているため、分散デバイス上でデータ集約型のリアルタイム アプリケーションを実行するのに最適です。

簡単に言えば、Node.js は、Java 言語のコンパイルに必要な Jvm 仮想マシンと同様に、プロジェクトのコンパイル環境に相当します。 Node.js をインストールしたら、Node プロジェクトをコンパイルできます。

1.2 の

• Vue (発音は /vjuː/、view に似ています) は、ユーザー インターフェイスを構築するためのプログレッシブ JavaScript フレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てているため、サードパーティのライブラリや既存のプロジェクトとの統合が容易になります。
• Vue.jsの目標は、可能な限りシンプルなAPIを通じて、レスポンシブなデータバインディングと結合されたビューコンポーネントを実装することです。
• Vue.js 自体はフル機能のフレームワークではなく、ビュー層のみに焦点を当てています。したがって、学習は非常に簡単で、他のライブラリや既存のプロジェクトとの統合も非常に簡単です。一方、Vue.js は、関連ツールやサポートライブラリと組み合わせて使用​​すると、複雑なシングルページ アプリケーションを完璧に実行することもできます。
• Vue.js の機能: 使いやすさ: HTML、CSS、JavaScript に基づいてすぐに開始できます。柔軟性: シンプルでコンパクトなコアと進歩的なテクノロジー スタックにより、あらゆる規模のアプリケーションを処理できます。高性能: 最小 20kb+gzip ランタイムサイズ、超高速仮想 DOM、そして最も安心できる最適化

簡単に言えば、Vue.js は Java の Spring シリーズに似たアプリケーション フレームワークです。簡潔で効率的な構文を提供し、フロントエンド プロジェクトを効率的かつ高品質に完了するのに役立ちます。同時に、軽量フレームワークであるため、その構文を使用するには vue.js を導入するだけで済みます。

1.3 この記事の概要

この記事では、Vue.js プロジェクトをローカルで実行し、同時に Vue プロジェクトをサーバー上で独立してデプロイする方法を説明します。

2. ローカル開発環境でフロントエンドのVueプロジェクトを実行する

2.1 Node.jsをダウンロードしてインストールする

ダウンロードアドレス: https://nodejs.org/zh-cn/

Windows バージョンを選択します。長期サポート バージョンを選択することをお勧めします。プロンプトが表示されたら [OK] をクリックします。node.js がインストールされると、環境変数が自動的に構成されます。インストールが完了したら、cmd ウィンドウを開き、コマンド node --version を入力します。図に示すように、次の内容が表示されたら、インストールが成功したことを意味します。

2.2 フロントエンド開発ツールをインストールする

WebStrom と VsCode はフロントエンドでよく使用されます。WebStrom のインストール方法を紹介します。

1. WebStorm をダウンロードします: ダウンロード アドレス https://www.jetbrains.com/zh-cn/webstorm/download/

2. WebStrom をインストールします。インターネット上には多くのチュートリアルがあります。詳細については Baidu で検索してください。長期間使用しない場合は、30 日間無料で試すことができます。

3. プロジェクトをインポートします。ファイルをクリック -> 開く -> 特定のフロントエンド プロジェクトを選択し、OK をクリック -> インデックスが構築されるのを待ちます。

4. 一般的なコマンド:

プロジェクトをビルドします。

npmインストール

サービスを開始する

npm 実行 dev

提供された URL パスをクリックし、図に示すようにブラウザを開いてサービスを表示します。

2.3 package.json のコマンドを使用して起動します。

図に示すように、緑色の矢印を直接クリックして開始できます。

写真はIntellij IDEAです。WebStromも同様に使用されます。

他にもコマンドはありますが、ここでは詳しく説明しません。学生は知りたいことがあれば、Baidu で検索することができます。

3. フロントエンドのVueプロジェクトをサーバー環境にデプロイする

3.1 Node.js環境のデプロイ

• こちらのチュートリアルを参照してください https://blog.csdn.net/qq_37128049/article/details/104431768
• Npm に付属している Node をインストールするだけです。
• このチュートリアルで設定された Node 環境変数は一時的な環境変数であり、プロジェクトを再起動するときに書き換える必要があります。永続的な環境変数が必要な場合は、オンラインのチュートリアルを参照できます。

3.2 express-generatorジェネレータをインストールする

ジェネレータをインストールするには、次のコマンドを入力します。

npm インストール express-generator -g

エクスプレス プロジェクトを作成します。

express expressDemo (expressDemo を自分のプロジェクト名に置き換えてください)

expressDemo プロジェクト ディレクトリは次のとおりです。

プロジェクトを入力してください:

cd expressデモ

独自のプロジェクト名に変更する場合、expressDemoはここで独自のプロジェクト名に変更されます

プロジェクトビルド:

npmインストール

Windows 開発ツールを開き、npm build コマンドを使用してプロジェクトをパッケージ化し、public の下のファイルを expressDemo の public ディレクトリにコピーします。

expressDemo を実行するには、次のコマンドを入力します。

npm スタート

ブラウザを開いてhttp://localhost:3000と入力して効果を確認してください。

サーバーに展開した場合、自分のコンピューターでの効果を確認するには、次の点に注意する必要があります。1. localhost をサーバーの IP に、ポート 3000 を実際のポートに置き換えます。2. 起動時にアクセスに失敗した場合は、ファイアウォールがこのポートに対して開いているかどうかを確認してください。

上記は Vue プロジェクトを開始する方法です。他にも多くの方法があり、学生はオンラインで答えを見つけることができます。最も簡単な方法は、すべてのコードを直接コピーし、npm install+npm run dev を実行して正常に起動することです。Vue プロジェクトではなく Node.js プロジェクトの場合は、この方法も使用できます。

以上がVue.jsプロジェクトの開始方法の詳細です。Vue.jsプロジェクトの開始の詳細については、123WORDPRESS.COMの他の関連記事をご覧ください。