vscodeでvueをビルドする方法

フロントエンド テクノロジーの継続的な開発に伴い、開発に Vue フレームワークを採用する企業やチームが増えています。 Vue フレームワークの優れた設計と強力なエコシステムが、ますます多くの開発者が Vue を選択する理由になっています。実際のプロジェクトプロセスでは、効率的な開発環境が開発効率を大幅に向上させます。この記事では、実際にVSCodeでVueプロジェクトを構築する手順をデモを交えて紹介します。

環境の準備

Vue プロジェクトのビルドを開始する前に、Node.js、Vue-CLI、VSCode などの必要なソフトウェアがインストールされていることを確認する必要があります。まだインストールされていない場合は、次の手順を参照してインストールしてください。

Node.js のインストール

Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイム環境であり、サーバー側で JavaScript を実行できるようになります。この記事では Node.js バージョン 14.17.3 を使用しており、ダウンロード アドレスは https://nodejs.org/en/download/ です。

Vue-CLI のインストール

Vue-CLI は、Vue プロジェクトを迅速に構築するのに役立つ公式のスキャフォールディング ツールです。ターミナルまたはコマンド ラインに次のコマンドを入力してインストールします。

# 全局安装Vue-CLI
npm install -g @vue/cli

VSCode のインストール

VSCode は、複数のプログラミング言語をサポートする軽量で強力なクロスプラットフォーム コード エディターです。ダウンロードアドレスはhttps://code.visualstudio.com/です。

プロジェクトのビルド

必要なソフトウェアをインストールしたら、Vue プロジェクトのビルドを開始できます。ターミナルまたはコマンドラインに次のコマンドを入力してプロジェクトを作成します。

# 创建项目
vue create demo

このうち、demo はプロジェクト名であり、実際の状況に応じて変更できます。プロジェクトを作成した後、次のインターフェイスに入ります。

ここでは、デフォルト設定を使用するか手動構成オプションを使用するかを選択できます。手動構成オプションには次のものが含まれます:

• Vue バージョン (2.x および 3.x バージョンを含む) を選択します;
• Babel と TypeScript を使用するかどうか;
• ESLint や Prettier などのコード標準化ツールを使用するかどうか。
• Vue Router や Vuex などの一般的なプラグインを使用するかどうか。

実際のニーズに応じて設定できます。完了後に Enter キーを押し、プロジェクトの作成が完了するまで待ちます。

プロジェクトが作成されたら、VSCode を使用してプロジェクト ディレクトリを開くことができます。 VSCode で「ファイル」→「フォルダーを開く」を選択し、先ほど作成したデモフォルダーを見つけて開きます。

プロジェクトの実行

VSCode でプロジェクトを開いた後、ターミナルまたはコマンド ラインからプロジェクト ディレクトリに入り、プロジェクトを実行できます。ターミナルまたはコマンドラインに次のコマンドを入力します。

# 进入项目目录
cd demo

# 运行项目
npm run serve

項目を入力すると、ローカル開発サーバーが起動し、次の情報が出力されます。

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Access http://ブラウザーの localhost :8080/ に、作成したばかりの Vue プロジェクト ページが表示されます。

プロジェクトのデバッグ

Vue プロジェクトを開発する場合、デバッグは非常に重要なリンクです。優れたコード エディターとして、VSCode は開発プロセス中のデバッグを容易にする豊富なデバッグ機能を提供します。次に、VSCode で Vue プロジェクトをデバッグする方法を紹介します。

まず、VSCode で [デバッグ] パネルを開きます。 [起動とデバッグ] ドロップダウン リストで [Launch.json ファイルが作成されました] オプションを選択します。

次に、ポップアップ ウィンドウで Vue プロジェクトを選択します。

Vue プロジェクトを選択した後、VSCodeデフォルトのデバッグ構成が設定された launch.json ファイルが自動的に作成されます。

これで、VSCode で .vue ファイルを開き、その左側にあるブレークポイントを選択できるようになりました。次に、ブラウザで http://localhost:8080/ にアクセスし、ページ上の関数を操作してブレークポイントをトリガーします。

概要

この記事では、VSCode で Vue を構築する実際のプロジェクト プロセスの概要を説明します。環境の準備からプロジェクトの作成、プロジェクトの実行、デバッグまで、実際の開発における基本的なプロセスをデモとスクリーンショットを使用して紹介し、実際の Vue プロジェクトの構築プロセスをより深く理解できるようにします。

Vue 開発エキスパートになるには、テクノロジーとツールを習得することに加えて、継続的な学習と練習も必要です。この記事は単なる入門ガイドであり、読者の皆様がこれに基づいて Vue フレームワークのさらに多くの特徴や機能を学び、探索していただけることを願っています。

以上がvscodeでvueをビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。