vue-cli スキャフォールディングを使用してプロジェクトを構築する手順

1. ノードのインストール

ダウンロード URL:ダウンロード | Node.js

ダウンロードが完了したら、それを開いて「次へ」をクリックします

2. インストールを確認する

ターミナルを開き、node と npm のバージョンを確認し、インストールが成功したかどうかを確認します。

(1). コンピュータの下部にあるナビゲーション バーの検索ボックスをクリックします。

(2).「cmd」と入力してEnterを押します。

(3). ノードのバージョンを表示するコマンド:node space -v

   npm バージョンのコマンドを表示します: npm space -v

インストール前にターミナルを開いた場合は、インストール後にターミナルを閉じて再度開く必要があります 

3. 送信元アドレスを設定する

npm はデフォルトでパッケージをインストールする際に外部アドレスからダウンロードするため、速度が非常に遅くインストール失敗しやすいため、最初に npm のソースアドレスを設定する必要があります。

(1). 次のコマンドを使用して、npm のソース アドレスを Taobao ソースに変更します。

npm config レジストリを設定 http://registry.npm.taobao.org/

(2). 変更後、送信元アドレスが正しく変更されているか確認してください。

npm config レジストリを取得

 4.vue-cliをインストールする

(1) 以下のコマンドを使用して vue-cli ツールをインストールします

npm install -g @vue/cli

(2) インストール後、vue-cli が正常にインストールされているか確認してください。

vue --バージョン

5.vue-cliの使用

(1) ターミナルにディレクトリを入力します

プロジェクトフォルダーを配置するディレクトリを選択してください

ターミナルでそのディレクトリに移動します

(2) 建設プロジェクト

vue-cli が提供するコマンドを使用してプロジェクトをビルドします

(1) vue createプロジェクト名

 注: プロジェクト名には小文字のみを使用でき、英語、数字、ダッシュのみを使用できます。

(2)

(3) インストールする必要があるもの。現時点では互換性を処理するために babel を使用するだけで済みます。

 

 (4) vue 以外の他の設定ファイルを 1 つのファイルに統合するか、別のファイルを使用する必要があります。ここでは、1 つのファイルに統合する json を選択します。

 (5) 今後のプロジェクトでも同じ構成を維持するかどうか、ここで [いいえ] を選択し、Enter キーを押します。

 

 (6) プロジェクトがビルドされるのを待ちます

(7) 構築が完了すると、以下のディレクトリにプロジェクトフォルダが生成されます。

 (8) このbili-appというプロジェクトフォルダーをvscodeにインポートします

 (9) プロジェクトディレクトリにターミナルを入力します

 (10) npm runserve コマンドを使用してプロジェクトを開始します

 

 (11) Google ブラウザのアドレスバーにローカルサーバーのアドレスを入力し、プロジェクトの最初のページに入ります。

6. vue プロジェクトの構造を分析する

 

 上記は、vue-cli 足場構築プロジェクトのより詳細な手順です。

おすすめ

転載: blog.csdn.net/weixin_46501763/article/details/127806044