5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)

1. Vue環境を構築する

Nodejs をインストールする 公式 Web サイトから Nodejs をダウンロードします。安定した開発環境が必要な場合は、安定している LTS (Long Time Support) バージョンをダウンロードしてください。

クリックするとノードの公式サイトに入ります

インストール後、cmd に node -v と入力してインストールが成功したかどうかを確認します。以下のようにバージョン番号が表示されれば成功です。

2. Vue スキャフォールディングツール

vue-cli をグローバルにインストールし、コマンドラインに入力します。

npm をインストール --g vue-cli

中国でnpmの公式イメージを直接使用すると非常に遅くなります。Taobaoイメージまたはyarnを使用することをお勧めします。

タオバオミラーのインストールは次のとおりです

npm をインストール -g cnpm --registry=https://registry.npm.taobao.org
//インストールが成功したら、npm install xxx の代わりに cnpm i xxx を使用します

3. プロジェクトを作成する

vue プロジェクト名の作成

vue create code //code はプロジェクト ディレクトリの名前です (Enter キーを押して確定し、次の手順に進みます)

最初にEnterキーを押すと次の2つの項目が表示されます。

デフォルト (Vue 3) ([Vue 3] babel、eslint) (デフォルト設定では、babel または eslint のサポートが提供されます)
手動で機能を選択する

上下キーとスペースバーを使用して必要なものを選択できます。通常は、手動構成を選択します。

4. 手動で選択する（Enterキーを押して確定し、次のステップに進む）

王氏は各項目の機能について簡単に説明しました。

• Babel は主に es6 構文を互換性のある js に変換します (選択)
• TypeScriptはTypeScript構文を使用したコードの記述をサポートします
• プログレッシブ ウェブ アプリ (PWA) のサポート [Web ページをネイティブ アプリのようにする]
• ルーターはvueルーティング構成プラグインをサポートしています（通常は選択されています）
• Vuex は Vue プログラム状態管理モードをサポートします (通常は選択)
• CSS プリプロセッサは CSS プリプロセッサをサポートします (通常は選択)
• Linter / Formatter はコード スタイルのチェックとフォーマットをサポートします (選択済み)
• ユニットテスト
• E2E テスト
  

一般的なプロジェクトの選択は次のとおりです

5. 選択が完了したら、Enterキーを押します。ここでは3.xを選択します。

6.完了したら、Enterキーを押して次のインターフェイスを表示します。

これは、このプロジェクトが履歴モードを使用するかどうかを尋ねることを意味します。Yを選択した場合は、背景を設定する必要があります。詳細については、vueRouterの公式Webサイトを参照してください。ここではnを選択します。

7. Enterキーを押すと次のインターフェースが表示されます。

これは、どの CSS 前処理言語を選択するかを尋ねることを意味します。私は通常、プロジェクトで SCSS を使用します。最初のものを選択します。

8. Enterキーを押すと次のインターフェースが表示されます。

これは、コードをフォーマットする方法を選択することを意味します。私は通常、ESLint + Prettierを選択します。

9. Enterキーを押すと次のインターフェースが表示されます。

これは、コードルール検出をいつ実行するかを尋ねることを意味します。私は通常、保存時に検出することを選択します。つまり、保存時にLintを実行します。

10. Enterキーを押すと次のインターフェースが表示されます。

ここでは、Babel、PostCSS、ESLint の設定ファイルをどこに置くかを意味します。通常は、package.json ファイルを整理するために別の場所に置くことを選択するので、最初の場所を選択します。

11. Enterキーを押すと次のインターフェースが表示されます。

ここで、この構成選択を記録するかどうかを尋ねられます。 選択後、次回選択をすばやく構成できるように、この構成に名前を付けるように求められます。 最後に、Enter キーを押してプロジェクトを初期化します。 完了すると、次のようになります。

12. 指示に従ってプロジェクトを開始する

指示に従って、まずcd codeを実行し、次にnpm run serveを実行します。

13. webpack 関連の設定をカスタマイズする必要がある場合は、プロジェクトのルート ディレクトリに vue.config.js ファイルを作成する必要があります。これは @vue/cli-server によって自動的に読み込まれます。公式サイトでは詳細な設定内容が提供されます。公式サイトにアクセスして確認することができます。今日はこれで終わりです。次回は、この号の最後でお会いしましょう。 ！ ！

これで、vue-cli3 を使用して 5 分でプロジェクトを作成する方法 (初心者向け) を説明するこの記事は終了です。vue-cli3 プロジェクト作成に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。