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データベースをアンインストールするための完全な手順

推薦する

Vue で ToDo アプリケーションを実装する例

背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...

MySQL での GROUP_CONCAT の使用例の分析

この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...

Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。

Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...

JavaScript の絶妙なスネーク実装プロセス

目次1. HTML構造を作成する2. テーブルを作成する3. ヘビの頭と体を作る4. 食べ物を作る5...

MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法

序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...

CSS3は背景画像にマスクを設定し、マスクスタイルの継承の問題を解決します。

多くの場合、透明度の設定やぼかしなど、写真の背景を加工する必要があります。 ただし、背景画像が配置さ...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

Nexusプライベートサーバー構築原理とチュートリアル分析

1つ。 Nexus プライベート サーバーを構築する理由は何ですか?社内の開発メンバーは全員外部ネッ...

WindowsとLinux間でファイルを転送する方法

WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...

CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

1.デバイス幅定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開か...

Node.js でのクラスター作成に関する簡単な説明

目次クラスタクラスターの詳細クラスター内のイベントクラスター内のメソッドクラスター内の属性クラスター...

mysql5.7でbinlogを使用してデータを復元する方法

ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...