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 をよろしくお願いいたします。

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