Nodejs Scaffolding vuecli をインストールする方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejs Scaffolding vuecli をインストールする方法

PHPz

Apr 26, 2023 am 09:10 AM

Node.js は、サーバー側で JavaScript を実行できる軽量の JavaScript ランタイム環境で、開発者は JavaScript のプログラミング機能をサーバー側プログラミングに利用できます。 Vue.js は、使いやすく、効率的で柔軟な人気のフロントエンドフレームワークであり、モバイルおよび PC の Web 開発で広く使用されています。

Vue.js を Web 開発にさらに便利に使用するために、Vue.js は Vue CLI (Vue Command Line Interface) というスキャフォールディングツールを提供します。 Vue CLI は、開発者が Vue.js アプリケーションを迅速に構築できるように、構築、起動、パッケージ化機能を含む標準化されたツールチェーンを提供します。

この記事では、Node.js と Vue CLI をインストールし、基本的な Vue.js アプリケーションを作成する方法を紹介します。

Node.js のインストール

Vue CLI を使用するには、まず Node.js をインストールする必要があります。 Node.js は公式 Web サイト https://nodejs.org/ からダウンロードできます。

お使いのシステムに応じて、ダウンロードする対応するバージョンを選択してください。インストールが完了したら、コマンドラインウィンドウ (Windows ユーザー) を開き、次のコマンドを入力して、Node.js が正常にインストールされているかどうかを確認します。 #

node -v

ログイン後にコピー

返された場合 Node.js のバージョン番号が表示されている場合は、Node.js が正常にインストールされていることを意味します。

Vue CLI のインストール

Vue CLI は npm を通じてインストールできます。 npm は Node.js のパッケージマネージャーであり、パブリック npm リポジトリからさまざまな JavaScript パッケージとツールをダウンロードしてインストールできます。

コマンドラインウィンドウに次のコマンドを入力して Vue CLI をインストールします:

npm install -g @vue/cli

ログイン後にコピー

このコマンドは Vue CLI をグローバル環境にインストールし、どこでも使用できます。

Vue.js アプリケーションの作成

Vue CLI をインストールした後、それを使用して Vue.js アプリケーションを作成できます。

コマンドラインウィンドウに次のコマンドを入力して、基本的な Vue.js アプリケーションを作成します。

vue create my-project

ログイン後にコピー

このうち、my-project はプロジェクト名であり、独自に変更できます。ニーズ。

このコマンドを実行すると、Vue CLI はプリセットを選択するように求めます。プリセットには、次のようないくつかの異なるオプションがあります。

デフォルト (TypeScript)
デフォルト (TypeScript、ESLint)
機能を手動で選択
## これらのプリセットBabel、PostCSS、ESLint などの一般的に使用されるオプションを自動的に構成します。基本的なアプリケーションのみが必要な場合は、デフォルトのオプションを選択できます。

Vue CLI は、必要なパッケージと依存関係をすべてダウンロードし、基本的な Vue.js アプリケーションを生成します。

Vue.js アプリケーションを実行する

Vue.js アプリケーションを作成したら、それを実行できます。コマンドラインウィンドウにプロジェクトディレクトリを入力し、次のコマンドを入力します。

cd my-project
npm run serve

ログイン後にコピー

これにより、ローカル開発サーバーが起動します。これを http://localhost:8080 のブラウザで表示してアプリケーションを表示できます。

概要

Node.js と Vue CLI はどちらも、開発者が Vue.js アプリケーションを迅速に構築するのに役立つ非常に強力なツールです。この記事では、Node.js と Vue CLI をインストールし、基本的な Vue.js アプリケーションを作成する方法を説明します。この記事が、Web 開発で Vue.js をより便利に使用するのに役立つことを願っています。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。