vue-cli のインストールと使用手順の詳細な説明

今回はvue-cliインストール使用方法について詳しく説明します。vue-cliのインストールと使用時の注意点は何ですか?実際の事例を見てみましょう。

vue-cli をインストールするための前提条件は、npm をインストールしていることです。npm をインストールするには、インストール用のノード インストール パッケージを直接ダウンロードできます。コマンド ライン ツールに「npm -v」と入力すると、npm がインストールされているかどうかとバージョンを確認できます。表示されるバージョン番号は、npm とノードがインストールされていることを示します。このコマンドが使用できない場合は、システムのバージョンに応じてノード ソフトウェア パッケージをダウンロードしてインストールする必要があります。

1. vue-cli

をインストールします。 コマンドラインツールに次のように入力します:

npm install vue-cli -g

-g: グローバルインストールを表します。 vue -V を使用して、インストールのバージョン番号を確認します (-V は大文字です)

2. プロジェクトを初期化します

vue init コマンドを使用してプロジェクトを初期化します:

vue init <template-name> <project-name>

: Vue-cli が公式に提供する 5 つのテンプレート、

、browserify、browserify-simple、simple

: プロジェクト名を示します。 、これを行うことができます プロジェクトに従って名前を付けます。実際の開発プロセスでは、webpack テンプレートを使用することが一般的です。

vue init webpack vueclitest

コマンドを入力した後、いくつかの簡単なオプションを尋ねられるので、必要に応じて入力するだけです。

プロジェクト名: プロジェクト名。注: ここでは大文字は使用できません。

プロジェクトの説明: プロジェクトの説明。

Author: 著者、git で author を設定している場合は読み取ります。

vue-router をインストールしますか? : vue の routing プラグインをインストールするかどうか。はい

コードに ESLint を使用しますか? : コードのエラーとスタイルを制限するために ESLint を使用するかどうか。自分で練習する必要はありません。大規模なチームで開発している場合は、これを構成するのが最善です。

Karma +Mocha を使用して単体テストをセットアップしますか? 単体テスト ツールをインストールする必要がありますか?私たちは必要としていない。 N

Nightwatch で e2e テストをセットアップしますか? ユーザー 行動 シミュレーション テストのために e2e をインストールするかどうかですが、自分の練習には必要ありません。 n

を入力すると、最初のステップが初期化されます。

cd vueclitest vue プロジェクト ディレクトリに入ります。

npm install プロジェクトの依存関係をインストールします。つまり、package.json にパッケージをインストールします (cnpm を使用してインストールすることもできます)

npm run dev 開発モードでプログラムを実行します。開発サーバー環境を自動的に構築してブラウザで開き、コードの変更をリアルタイムで監視しました。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue router を使用して参加する方法

PHP を使用して WeChat アプレットの顔認識と顔スワイプ ログインを実装する方法

以上がvue-cli のインストールと使用手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。