Vue 3のインストールと環境設定
1.Node.jsをインストールする
-
Node.js 公式ウェブサイト: https://nodejs.org/en/download
-
インストールが成功したら、CMD コンソールに
node -v「 and 」とnpm -vインストールが成功したかどうかを確認します。
2. デフォルトのインストールディレクトリとキャッシュログディレクトリを設定します。
- デフォルトのインストールディレクトリとキャッシュログディレクトリを作成します（私のnodejsディレクトリはDドライブ上にあるので、nodejsフォルダの直下に作成します）
グローバル インストール ステートメントが実行されると、インストールされたモジュールはデフォルトで C:\Users\username\AppData\Roaming\npm ディレクトリにインストールされるため、C ドライブは時間の経過とともに簡単にいっぱいになります (C ドライブは無視できるほど大きいです)この手順)、そのため、C ドライブのスペースを節約するために、デフォルトのインストール ディレクトリとキャッシュ ログ ディレクトリを他のドライブ文字に再構成します。
- コマンドを実行して、デフォルトのインストール ディレクトリとキャッシュ ログ ディレクトリを作成したフォルダーに設定します。
npm config set prefix "D:\configuration\nodejs\node_global"
npm config set cache "D:\configuration\nodejs\node_cache"
3. 環境変数を構成する
- Win キーを押して「システム環境変数の編集」と入力してシステム プロパティ インターフェイスを呼び出し、下の「環境変数」ボタンをクリックします。
- システム変数の下に新しい NODE_PATH 変数を作成し、デフォルトのインストール ディレクトリ node_global の下にある node_modules のパスを入力します。
D:\configuration\nodejs\node_global\node_modules
- システム変数のパスを入力し、nodejs のインストール パスを入力します。
D:\configuration\nodejs\
- ユーザー変数のパスを入力し、nodejs のデフォルトのモジュール呼び出しパスを入力します。
D:\configuration\nodejs\node_global
D:\configuration\nodejs\node_cache
4.タオバオミラーの設定
NPMでインストールすると海外サーバーを使用するため、タイムアウトエラーがよく発生しますが、国内のタオバオミラーに変更することでインストールを高速化できます。Taobao NPM ミラーは完全な npmjs.com ミラーであり、公式サービスとの同期を可能な限り確保するために、同期頻度は現在 10 分ごとです。
- cnpmをインストールする
npm install -g cnpm --registry=https://registry.npm.taobao.org
- インストールが成功したことを確認する
cnpm config get registry
5. vue と Scaffolding をインストールする
- vue.jsをインストールする
cnpm install vue -g
- インストールが成功したことを確認する
cnpm info vue
npm list vue
- Webpackモジュールをインストールする
cnpm install webpack -g
- webpack-cli をインストールする
cnpm install --global webpack-cli
6. vue-cli 3.x をインストールする
cnpm install @vue/cli –g
7. vue 3 プロジェクトを作成する
- 管理者として cmd コンソールを開き、プロジェクトを作成するディレクトリを入力して、プロジェクトの作成を開始します。
vue create [项目名称]
-
管理者 ID が使用されていない場合、次のエラーが表示される場合があります
-
表示されたプロンプトに従ってプロジェクト ディレクトリを入力し、プロジェクトを実行します。
npm run serve
- 指定された URL をブラウザに入力すると、プロジェクトが正常にビルドされたことを示す次のページが表示されます。
