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 足場構築プロジェクトのより詳細な手順です。