Vue スキャフォールディングプロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli

大規模で完全に機能する Vue プロジェクトテンプレート (初期化プロジェクト) をすばやく作成します。

現実的な説明: 空の Vue プロジェクトをすばやく作成する

インストール（グローバルインストール）

グローバルインストール

> npm i @vue/cli -g

Vue スキャフォールディングプロジェクトを作成する

> vue プロジェクト名を作成

設定オプション

Vue CLI v4.5.11
? プリセットを選択してください: (矢印キーを使用)
> デフォルト ([Vue 2] babel、eslint) 
 デフォルト (Vue 3 プレビュー) ([Vue 3] babel、eslint) 
 手動で機能を選択する

上下を押して選択し、Enterキーを押して確定します。ここでは3番目のオプションの手動を選択します。

機能を選択

Vue CLI v4.5.11
? プリセットを選択してください: 機能を手動で選択
? プロジェクトに必要な機能をチェックします: (選択するには <space> を、すべてを切り替えるには <a> を、選択を反転するには <i> を押します)
>(*) Vueのバージョンを選択
 (*) バベル
 （）タイプスクリプト
 （）プログレッシブウェブアプリ（PWA）のサポート
 （）ルーター
 （）ヴュークス
 （）CSSプリプロセッサ
 (*) リンター/フォーマッター
 （）ユニットテスト
 （）E2Eテスト

カーソルを上下に動かし、スペースキーを押して選択し、Enterキーを押して確定します。ここではオプション1 2 5 6を選択します。

バージョンを選択

プロジェクトに必要な機能を確認します: Vueバージョン、Babel、Router、Vuexを選択します
プロジェクトを開始する Vue.js のバージョンを選択します (矢印キーを使用)
> 2.x
 3.x (プレビュー)

ここで2.xを選択してください

履歴モードを使用するかどうか

? ルーターに履歴モードを使用しますか? (運用時のインデックス フォールバックには適切なサーバー設定が必要です) (Y/n)

ここでnと入力してEnterキーを押します

Babel、ESLint などの設定場所。

Babel、ESLint などの設定をどこに配置するのがよいでしょうか? (矢印キーを使用)
> 専用の設定ファイル内
 package.json内

ここで、保存する最初の専用設定ファイルを選択します

プリセットとして保存

? これを将来のプロジェクト用のプリセットとして保存しますか? (y/N)

ここではnを選択します

成功を創る

Vue CLI v4.5.11
D:\MyStudy\myvue2 にプロジェクトを作成しています。
⚙️ CLI プラグインをインストールしています。これにはしばらく時間がかかる場合があります...


> [email protected] インストール後 D:\MyStudy\myvue2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> [email protected] インストール後 D:\MyStudy\myvue2\node_modules\ejs
> ノード ./postinstall.js

21.836秒で928人の貢献者から1208個のパッケージを追加しました

61のパッケージが資金を募集中
詳細については `npm fund` を実行してください

🚀 ジェネレーターを呼び出しています...
📦 追加の依存関係をインストールしています...

4.671 秒で 1 人の貢献者から 5 つのパッケージを追加しました

61のパッケージが資金を募集中
詳細については `npm fund` を実行してください    

⚓ 完了フックを実行しています...

📄 README.md を生成しています...

🎉 プロジェクト myvue2 が正常に作成されました。  
👉 以下のコマンドで開始します。

$ cd myvue2
$ npm 実行 サーブ

プロジェクトディレクトリに入る

> cd myvue2

サービスを開始する

> npm 実行サーブ

 完了 2492msで正常にコンパイルされました                   

 アプリの実行場所:
 - ローカル: http://localhost:8080/ 
 - ネットワーク: http://192.168.17.154:8080/

 開発ビルドは最適化されていないことに注意してください。
 プロダクションビルドを作成するには、npm run build を実行します。

これで、vue スキャフォールディングプロジェクトを作成するための詳細な手順に関するこの記事は終了です。より関連性の高い vue スキャフォールディングプロジェクト作成コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: