1. 現在の Vue バージョンを確認する
次のコマンドを入力して、現在インストールされている Vue-cli のバージョンを確認します。
vue が内部コマンドではないというメッセージが表示された場合は、次のコマンドを入力してください。
npm install -g @vue/cli
注: vue-cli バージョンを確認するときは、V を大文字にする必要があります
2. コマンドラインを使用してプロジェクトを作成する
まずフォルダーを作成しましょう。D:\project\vue-demo vue-demo は作成したフォルダーです。ルート ディレクトリに入り、cmd を実行します。
1.作成コマンドを入力します。
vue create my-demo
以下に示すように:
コマンドを入力した後、直接 Enter キーを押すと、次のようなプロンプトが表示される場合があります。
デフォルトの pnpm レジストリへの接続が遅いようです。
すぐにインストールするには https://registry.npmmirror.com を使用しますか? Y を選択することもできます
Y を入力すると、次の画像が表示され、
vue3 または vue2 をデフォルト (デフォルト) でインストールするかどうかを選択するよう求められます。必要に応じて選択します。ここでは、vue3 をデフォルトでインストールするか、手動でインストールします。 (手動)。
1. まず、次のようにデフォルトのインストールを選択します。
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use PNPM
Use NPM
依存関係をインストールするときに使用するパッケージ マネージャーを選択します
依存関係をインストールするときに使用するパッケージ マネージャーを選択します
pnpmをインストールしましょう。pnpmとnpmの違いについてはここでは説明しませんが、やり方が分からない場合はBaiduにアクセスして確認してください。
2. まず、次のように手動インストールを選択します。
注: キーボードの上下の矢印キーを使用して上下を選択し、スペースバーで選択またはキャンセルし、 a ですべてを選択します。
まず、各オプションの意味を説明します。
- TypeScript: TypeScript でのコーディングをサポートします。
- プログレッシブ Web アプリ (PWA) のサポート: PWA のサポート。
- ルーター: vue-router をサポートします。
- Vuex: Vuex 状態管理をサポートします。
- CSS プリプロセッサ: CSS プリプロセッサをサポートします。
- リンター/フォーマッタ: コード スタイルのチェックとフォーマットをサポートします。
- 単体テスト: 単体テストをサポートします。
- E2E テスト: E2E テストをサポートします。
プロジェクトのニーズに応じてインストールするオプションを選択してください。
選択後、Enter キーを直接押して選択インターフェイスに入ります。
プロジェクトを開始する Vue.js のバージョンを選択します
ここでは 3.x を選択し
、Enter キーを直接押してルーティング構成選択インターフェイスに入ります。
注: Y はヒストリー モードを使用することを意味し、N はハッシュ モードを使用することを意味します (つまり、URL アドレスには
選択した後、Enter キーを押し続け、CSS プリプロセッサを選択します。ここでは、Less モードを選択します。Enter キーを
押し続け、コード インスペクションとして標準構成を選択します。Enter
キーを押し続け、保存を選択したときにスタイル チェックを確認します。Enter
キーを押し続けます。 、ルーティング方法を選択し (y または n で y を選択)、In package.json を選択して
Enter キーを押し続けます。最後に、この構成を今後のプロジェクトのプリセットとして保存するかどうかを尋ねられます。はいを選択して Enter キーを押します。デフォルトでは、
最後に以下の図が表示されます。これは、構成が正常に作成されたことを意味します。
3. 両方のモードが作成され、サービスを開始します
pnpm run serve
以下の図に示すように、正常に起動します。
ブラウザに http://localhost:8080/ と入力すると、次のページが表示され、プロジェクトが正常に開始されたことが示されます。
これまで、vue プロジェクトはコマンド ラインの選択とコマンド操作によって作成されてきました。