Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

前回の記事では、 vue-cli cli をインストールしました。次に、scaffolding を使用してプロジェクトを作成します。

1. ディレクトリを入力してプロジェクトを作成する

プロジェクトを作成するコマンドは次のとおりです。

vue create <プロジェクト名> //ファイル名はキャメルケース（大文字を含む）をサポートしていません

コマンドを入力すると、 presetを選択するように求められます

デフォルトでは 3 つのオプションがあることがわかります。

• デフォルトのpresetには、基本的なBabel + ESLint設定（Vue2バージョン）が含まれています。
• デフォルトのpresetには、基本的なBabel + ESLint設定（Vue3バージョン）が含まれています。
• Manually select featuresはカスタム構成です
  

3番目のカスタム構成を選択します

2. 必要な設定項目を選択します

次に、設定項目に進みます。私のカスタム設定は次のとおりです。

具体的な説明は以下のとおりです。

 ◉ Vue のバージョンを選択 // Vue のバージョンを選択します◉ Babel // Transcoder は、ES6 コードを ES5 コードに変換して、既存の環境で実行できるようにします。 
 ◯ TypeScript // TypeScript は JavaScript のスーパーセット (サフィックス .js) (サフィックス .ts) であり、JavaScript の構文を含み拡張しており、ブラウザーで実行するには JavaScript としてコンパイルして出力する必要があります。◯ プログレッシブ Web アプリ (PWA) のサポート // プログレッシブ Web アプリケーション ◉ ルーター // vue-router (vue ルーティング)
 ◉ Vuex // vuex (vue の状態管理モード)
 ◉ CSS プリプロセッサ // CSS プリプロセッサ (less、sass など)
 ◉ リンター / フォーマッター // コードスタイルのチェックとフォーマット（ESlint など）
 ◯ ユニットテスト
 ◯ E2Eテスト

設定を選択したら、Enterキーを押して次のステップに進みます。

2.1 Vueのバージョンを選択する

次にvueバージョンを選択する必要があります。ここではvue2.xバージョンを選択します。

選択が完了したら、Enter キーを押して続行します。

2.2 履歴ルーターを使用するかどうかを選択する

次に、 history routerを使用するかどうかを尋ねられます。実際には、パスに# 號があるかどうかを言うのは簡単ですnを選択することをお勧めします。そうでない場合は、サーバーを構成する必要があります。

2.3 CSSプリプロセッサの選択

私が選択したcssプリプロセッサはSass/SCSS (dart-sass 付き) です。 node-sassはリアルタイムで自動的にコンパイルされますが、 dart-sass有効になる前に保存する必要があります。

2.4 Eslintコード検証ルールを選択する

次に、プラグインjavascriptコード検出ツールを提供するESLintコード検証ルールを選択します。ESLint ESLint + Prettierより頻繁に使用されます。

2.5 コードルールチェックを実行するタイミングを選択する

次に、コード ルールの検出をいつ実行するかを選択します。

( ) 保存時にリント // 保存時にチェック ( ) コミット時にリントと修正 // 修正してコミットするときにチェック

保存後にテストすることをお勧めします。 commitまでに多くの問題が蓄積されている可能性があります。

2.6 設定の保存方法を選択する

次に、いくつかの設定ファイルを別々のファイルに保存するか、すべてをpackage.jsonに保存するかを選択します。前者をお勧めします。

> 専用の設定ファイル内 // 独立したファイルの配置 package.json内 // package.json内に配置

2.7 現在の設定を保存する

最後に、次に他のプロジェクトを作成するときに 1 つずつ再度選択する必要がないように、選択した構成を保存するかどうかを選択します。ここで y を選択すると、保存した構成情報の名前を入力するように求められます。

保存した後、設定はどのフォルダーに保存されますか?

回答:ユーザー ディレクトリの .vuerc ファイルに配置されます。ユーザー ディレクトリに切り替えて、cat .vuerc コマンドを使用します。

構成情報は次のとおりです。

{
  "useTaobaoRegistry": true,
  "最新バージョン": "4.5.13",
  「最終チェック」: 1626320210348,
  「プリセット」: {
    "testVueCli": {
      "useConfigFiles": true、
      「プラグイン」: {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "履歴モード": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "もっときれい",
          "lintOn": [
            "保存"
          ]
        }
      },
      "vueバージョン": "2",
      "cssプリプロセッサ": "dart-sass"
    }
  }
}% 

ここで設定した設定情報が表示されます。設定を削除する場合は、プリセット内の情報を削除するだけです。

3. プロジェクト構成図

ここに、先ほど入力したすべてのオプションの画像があります。

4. プロジェクト作成完了

最後に、赤いボックス内の次のsuccessfully vue-cliスキャフォールディングを通じてプロジェクトが正常に作成されたことを意味します。

5. npm run serveと入力してプロジェクトを開始します。

プロジェクトが作成されると、プロジェクト ディレクトリは次のようになります。

package.jsonに直接アクセスし、 serveの左側にある開始ボタンをクリックし、 run serveをクリックすると、 webstorm自動的にプロジェクトを開始します。

起動が完了すると、コンソールに次の画面が表示されます。

http://localhost:8080/ をクリックすると、Web ページにホームページが表示されます。

6. プロジェクト構造分析

プロジェクトを作成したら、プロジェクトの全体的な構造と、プロジェクトの各フォルダーとファイルの機能について理解する必要があります。次に、プロジェクト構造の構成について詳しく説明します。

プロジェクト構造の構成:

ノードモジュール

プロジェクトに必要なさまざまな環境依存パッケージが含まれています

公共

publicフォルダには、ウェブサイトのタグfavicon.icoとindexホームページが保存されます。将来パッケージ化されるとき、これらのファイルはdistフォルダにそのままパッケージ化されます。

ソース

フロントエンドで書いたソースコードはこのフォルダにあります

.ブラウザリストrc

このファイルはブラウザの設定です。ファイルの内容は次のとおりです。

> 1%
最後の2つのバージョン
死んでいない

通常は変更は必要ありません

.eslintrc.js

コードスタイルの検出。コードルールを設定すると、コードを記述したときにルールに準拠していないコードがあった場合、コンパイル時にエラーが報告されます。

.gitignore

このファイルは、 gitを使用してアップロードするときに特定のファイルを無視するために使用されます。内容は次のとおりです。

Dockerファイル
.DS_ストア
ノードモジュール
/dist


# ローカル env ファイル
.env.local
.env.*.local

# ログファイル
npm-debug.log*
糸デバッグ.log*
糸エラー.log*
pnpm-デバッグログ*

# エディターのディレクトリとファイル
。アイデア
.vscode
*.suo
*.ntvs*
*.njsプロジェクト
*.sln
*.sw?

プロジェクト全体を git サーバーにアップロードすると、上記のサフィックスを持つファイルはアップロードされません。

bable.config.js

bableを構成するファイルは通常変更されない

パッケージ.json

スタートアップ プロジェクト コマンドなどを含む、プロジェクト パッケージ全体の構成がここに含まれています。

vue-cliプロジェクト作成とプロジェクト構造分析に関するこの記事はこれで終わりです。より関連性の高いvue-cliプロジェクト作成コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。