Vue スキャフォールディング学習プロジェクト作成方法

1. 足場とは何ですか?

1. Vue CLI

Vue CLI は、Vue.js をベースにした迅速な開発のための完全なシステムであり、以下を提供します。

• @vue/cli によって実装されたインタラクティブなプロジェクト スキャフォールディング。
• @vue/cli + @vue/cli-service-global 経由
• ゼロ構成プロトタイピングを実現します。
• 次のランタイム依存関係 (@vue/cli-service):
• アップグレード可能;
• 適切なデフォルト構成で webpack 上に構築されています。
• プロジェクト内の構成ファイルを通じて構成でき、プラグインを通じて拡張できます。
• フロントエンド エコシステムで最高のツールを統合する公式プラグインの豊富なコレクション。
• Vue.js プロジェクトを作成および管理するための完全なグラフィカル ユーザー インターフェイス。

Vue CLI は、Vue エコシステムの基本ツールの標準化に取り組んでいます。インテリジェントなデフォルト構成に基づいてさまざまなビルド ツールをスムーズに接続できるため、構成の問題を心配して何日も費やすことなく、アプリケーションの作成に集中できます。同時に、各ツールが排出することなく構成を調整できる柔軟性も提供します。

2. 特徴:

• テンプレートプロジェクトを素早く自動的に作成
• 環境を自動的にインストールして構成する
  

3. インストール方法

注: npmツールがあることを前提としています

ターミナルを開き、cmdコマンドを入力して、グローバル環境をダウンロードします（グローバル環境をダウンロードすることをお勧めします）

 npm インストール -g @vue/cli

4.ダウンロード後にバージョンの説明を確認してください

vue --バージョン

5. アップグレードバージョン

npm アップデート -g @vue/cli

2. プロジェクトの作成

プロジェクトを作成する

vue で myapp を作成する

指示に従って選択してください

ステップ1: インストール方法の選択 - カスタムインストール

デフォルト ([Vue 2] babel、eslint)

デフォルト (Vue 3 プレビュー) ([Vue 3] babel、eslint)

手動で機能を選択する

ステップ2: インストールするモジュールを選択する

◉ Vueのバージョンを選択 — ビューのバージョンを選択します

◉ Babel — JavaScript の解析

◯ TypeScript — ts の解析

◉ プログレッシブウェブアプリ（PWA）のサポート

◉ ルーター

◉ Vuex — 状態管理

◉ CSS プリプロセッサ

◉ リンター/フォーマッター — コードのフォーマット

◉ ユニットテスト — テストプラグイン

◉ E2E テスト — テストプラグイン

ステップ 3: ルーティング モードを選択します (オプション、後で調整可能)

履歴 — http://localhost:81/ バックエンドサポート

ハッシュ — http://localhost:81/#/ バックエンドのサポートは不要

ステップ4: CSSの処理方法を選択します（ここではノード環境でscssを選択します）

sass/scss - ノード

ステップ5: コード検証ルール - 標準ルール: 標準

エラー防止のみの ESLint

ESLint + Airbnb 設定

ESLint + 標準設定

ESLint + Prettier

ステップ6: 確認するタイミング: 保存するとき

◉ 保存時にリントする

◯ コミット時にリントと修正を行う

ステップ7: テストモジュールの選択: オプション

ステップ8: エンドツーエンドのテストソリューション: デフォルト

ステップ9: プロジェクト構成ファイル

パッケージ.json

ステップ 10: 現在の構成を保存しますか?

プロジェクトアーキテクチャの作成が完了するまで待ちます

3. プロジェクトカタログの紹介

1. ルートディレクトリ

+ node_modules --- プロジェクトの依存関係
+ 公開 --- 基本的なページ構造と静的リソース
+ src --- ワークスペース、開発環境
+ テスト --- テスト
.browserslistrc --- ブラウザの設定
.editorconfig --- エディターの設定
.eslintrc --- コードフォーマット設定
.gitignore --- git によって無視されるファイル設定
babel.config.js --- Babel の設定
cypress.json --- テスト関連プラグイン
package.json --- プロジェクトの依存関係の説明
README.md --- 説明ファイル

2.srcディレクトリ

+ アセット --- 静的リソース
+ コンポーネント --- コンポーネント
+ ルーター --- ルーティング
+ ストア --- 状態マネージャー
+ ビュー --- ページ
App.vue --- メインページの構造
main.js --- プログラムのエントリポイント

要約する

Vue スキャフォールディング学習のプロジェクト作成方法については、これで記事は終了です。より関連性の高い Vue スキャフォールディングプロジェクト作成コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。