Vue Scaffolding は、Vue が公式に提供する標準化された開発ツール (開発プラットフォーム) です。
スキャフォールディングをインストールする前に、Node.JS と npm もインストールする必要があります。
vue-cli をグローバルにインストールする[初期インストール]:
まずコマンドラインを開いて「npm install -g @vue/cli」と入力し、Enterを押してスキャフォールディングをインストールします。
コマンドラインをインストールします。
npm インストール - g @vue / cli
「xxs に追加された xxx パッケージ」が表示され、インストールが成功したことを示します
同時に、「vue -V」と入力して、現在のスキャフォールディングのバージョン番号を表示することもできます。
表示コマンド:
vue - v
注: vue-cli は一度インストールするだけで済み、vue プロジェクトの作成時に再インストールする必要はありません。
1.vueプロジェクトを作成する
まず、Vue プロジェクトを保存するディレクトリを準備し、そのディレクトリでコマンド ラインを開く必要があります。
コマンド ラインに vue create プロジェクト名を入力し、Enter キーを押して Vue プロジェクトを作成します。プロジェクト名はカスタマイズできます。
プロジェクト名を作成します:
vue作成
注: Vue プロジェクト名には大文字を使用できません。大文字を使用しないと次のエラーが表示されます。また、中国語名も使用できません。ファイル パスもできるだけ英語にする必要があります。
エラー内容:
無効なプロジェクト名: "vueTest"
警告: 名前には大文字を含めることはできません
次に、vue2 または vue3 バージョンをインストールするか、カスタム プロジェクトを作成するかを選択するように求められます。
Babel とは、ブラウザは ES5 標準のみを認識できるため、ES6、TS、および JSX は認識しません。babel は、これらのブラウザが認識しないコンテンツを ES5 コードに変換して、ブラウザが正常に実行できるようにするために使用されます。 。
eslint は、コードが開発仕様に準拠しているかどうかをチェックするために使用される文法検証ツールを指します。
vue2 または vue3 のバージョンを今すぐインストールすることを選択した場合は、プロジェクトのビルドを直接開始し、生成されたプロジェクトには babel と eslint のみがインストールされます。
以下の内容が表示されればインストール成功です。
カスタム プロジェクトの作成を選択した場合は、いくつかの構成も選択する必要があります。
備考: スペースバーを押して選択またはキャンセルします a キーを押してすべてを選択します i キーを押して選択を反転します Enter キーを押して次のステップに入ります
Vue CLI v5.0.8
? 構成項目を選択してください: 構成項目を手動で選択します
? プロジェクトに必要な構成項目を確認してください: スペースバーを押して選択またはキャンセルし、a キーを押してすべてを選択し、i キーを押して反転します選択内容を選択し、Enter キーを押して「次のステップ」に入ります。
( ) Babel 構文コンパイラをインストールするかどうか、ES6 => ES5
( ) TypeScript が typescript をサポートするかどうか
( ) Progressive Web App (PWA) Support が PWA をサポートするかどうか
( ) Router に vue-router をインストールするかどうか
( ) Vuex に vuex をインストールするかどうか
( ) CSS Pre-processors CSS プリプロセッサをインストールするかどうか
( ) Linter / Formatter コード スタイル チェック、フォーマット検証をインストールするかどうか (
) Unit Testing 単体テストをインストールするかどうか
( ) E2E Testing E2E テストをインストールするかどうか
注: 次に、選択した構成項目に応じていくつかの情報が要求されます。構成項目が異なると要求される情報は異なります。
原作者：呉暁棠
作成時期：2023.4.18