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

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

以下もご興味があるかもしれません:
  • vue スキャフォールディング ツールを使用して vue-webpack プロジェクトを構築する詳細な説明
  • vue-cli スキャフォールディングを使用して Vue.js プロジェクトを構築する方法の詳細な説明
  • vue-cli scaffolding project-package.json の詳細な説明
  • vue-cli3.0 スキャフォールディングを使用してプロジェクトを構築するプロセスの詳細な説明
  • vue-cli (vue scaffolding) を使用してプロジェクトをすばやく構築する方法
  • vue-cli スキャフォールディング ツールを使用して vue-webpack プロジェクトをビルドする
  • Vue スキャフォールディング プロジェクトをパッケージ化した後にルーティング ビューが表示されない問題を解決します
  • Electron-vue スキャフォールディングを使用して vue プロジェクトを変換する方法
  • vue scaffolding (vue-cli) を使用してプロジェクトを構築する詳細な説明
  • Vue プロジェクト下のプロジェクト構造を初期化するために vue-cli スキャフォールディングを使用する詳細な説明

<<:  Linux で Bash コマンド プロンプトをカスタマイズする方法

>>:  MySQLデータベースをアンインストールするための完全な手順

推薦する

セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...

XHTML 入門チュートリアル: XHTML ハイパーリンク

ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...

CSSを使用してダークモードとブライトモードを切り替える

Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

HTML ページで JSON データを表示およびフォーマットする方法

JSONデータはHTMLページ上に表示されフォーマットされます1. 表示効果図説明:すべてのキー値は...

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

vue3 学習ノートにおける axios の使用の変更の概要

目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...

Windows 64 ビットでの MySQL 8.0.13 のインストールと設定方法のグラフィック チュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...

Web コンポーネントの内部イベント コールバックと問題点の分析

目次前面に書かれたWC とは何でしょうか?現在の欠陥1. コンポーネント内部イベントのコールバック2...

MySQLインストーラがコミュニティモードで実行されている場合の解決策

今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

Linux リモートログイン実装チュートリアル分析

Linux は一般的にサーバーとして使用され、サーバーは一般的にコンピュータルーム内に置かれます。L...

MySQL データベース操作 (作成、選択、削除)

MySQL データベースの作成MySQL サービスにログインしたら、create コマンドを使用し...

見落としがちなVue.jsのAPIを詳しく解説

目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...