Vue3.0（公式バージョン）+ TSは、列のエンタープライズレベルのプロジェクトを模倣します
Vue3.0エンタープライズレベルのプロジェクトの戦闘。人気のあるテクノロジーを2つの剣と組み合わせて、Vue3.0はTypeScriptと連携し、新しいバージョンのVuexとVue-Routerを使用して、フロントエンド分離の複雑な実際の戦闘プロジェクトを完了します。簡単なものから難しいものまでの一連の一般的なコンポーネント開発では、基本的なコンポーネントライブラリ開発のアイデアとスキルを学ぶことができます。実際のバックエンドAPIにアクセスし、別れを告げてデータをモックし、Swaggerオンラインデバッグとクエリを提供します。フロントエンドとバックエンドの分離開発の問題点（許可管理、ルーティング制御、グローバルストア構造の設計、フロントエンドキャッシュの実装など）を把握します。
群衆のために
1-フロントエンド開発者技術予備要件
で卒業生のコミュニティに入った3年の経験HTML / CSS / JSの基本的な基本JavaScriptの基本Vue2
第1章コースの紹介
この章では、コース全体の内容を紹介し、コースのコアと配置を誰もが理解できるようにします。
1-1コースの紹介（ガイド）
1-2をご覧くださいコードライブラリとオンラインドキュメントを使用する際の注意事項（必見）
第2章Hello Typescript：型の世界に入る
この章は主にTypeScriptが解決できる問題とそれがもたらすものを理解するのに役立ちますの利点により、TSのさまざまな基本タイプを学習してから、配列、タプル、インターフェイス、関数、クラス、列挙、ジェネリックなどの複雑なタイプに進み、TSの基本的な使用法と構文をすばやく理解できます。
2-1Typescriptとは2-2typescript
を学ぶ必要がある理由2-3typescript
をインストールする
2-4プリミティブデータタイプと任意のタイプ
2-5配列とタプル
2-6インターフェイス-はじめに
2-7関数
2-8タイプの推測関連するタイプとタイプアサーション
2-9クラス-最初のクラスは
2-10のクラスとインターフェイスを満たします-完璧なパートナー
2-11列挙
2-12ジェネリックパート
12-13ジェネリック2パートコンストレイントジェネリック
2-14ジェネリックパートIII-クラスおよびインターフェイスでのジェネリックの使用
2-15タイプエイリアス、リテラル、およびインターリーブタイプ
2-16宣言ドキュメント
2-17組み込みタイプ
第3章Vue3の理解.0：新機能の詳細な説明
最初に、vue3によってもたらされた新しい変更を参照し、次にvue3がある理由のトピックを紹介し、コンパイルAPI、カスタムフック、テレポート、サスペンス、およびグローバルAPIの変更について学習します。vue3の一連の主要な更新。
3-1vue3の新機能のツアー3-2vue3
が存在する理由3-3vue
-cliを使用してvue3開発環境を構成する
3-4プロジェクトファイル構造の分析と推奨されるプラグインのインストール
3-5Vue3-refの魔法の使用
3-6最近ワンステップ-リアクティブ
3-7vue3レスポンシブオブジェクトの新しいトリック
3-8新しいワインの古いボトル-ライフサイクル
3-9変更の検出-ウォッチ
3-10vue3モジュラーマジック-マウストラッカー
3-11モジュラー難易度の上昇-useURLLoader
3-12モジュール化を組み合わせるtypescriptです汎用変換
3-13 vue3の活字体の祝福
3-14テレポート、テレポーテーションパート1
3-15テレポート、テレポーテーションパート2
3-16サスペンス非同期要求ヘルパーパート
1 3 -17サスペンス-非同期リクエストの優れたヘルパーパート
23-18グローバルAPIの変更
第4章プロジェクトセットの帆-準備と最初のページ
この章は、プロジェクト要件の分析から始まり、プロジェクトの全体的な構造とコード仕様を決定し、プロジェクトはスタイルライブラリとしてBootstrapを選択しました。ColumnListとGlobalHeaderを記述して簡単な実践的な練習を完了した後、最初のより複雑なドロップダウンメニューコンポーネントに挑戦し始め、最後に最初のフック関数を抽象化しました。..。
4-1プロジェクトセーリング要求分析
4-2ファイル構造とコードの仕様
4-3はじめとスタイルソリューションの分析
4-4設計分割およびコンポーネント属性分析を描く
4-5 columnlistのコーディングコンポーネント
のブートストラップと4-6 columnlistのコンポーネント美化を
4 -7GlobalHeaderコンポーネントのコーディング
4-8ドロップダウンコンポーネントの基本機能のコーディング
4-9ドロップダウンコンポーネントの追加DropdownItem4-10ドロップ
ダウンコンポーネントが外側の領域をクリックして自動的に非表示にします
4-11useClickOutside最初のカスタム関数
第5章フォームの世界-カスタマイズを完了しますフォームコンポーネント
この章では、フォームの世界について説明します。最初から最後まで、検証を伴うフォームコンポーネントの完全な開発プロセスを完了しました。プロセス全体で、vモデル、$ attrs、スロット、コンポーネントの親子通信、およびミットの様々な知識ポイント。
5-1Web世界の古典的な要素-フォーム
5-2ValidateInputパート1-簡単な実装例
5-3ValidateInputパート2-抽象的な検証ルール
5-4ValidateInputパート3-vモデルのサポート
5-5ValidateInputコーディングパート4つの部分-デフォルト属性をサポートするために$ attrsを使用します
5-6ValidateFormコンポーネント要件分析
5-7ValidateFormコーディング部分1-スロットを使用します
5-8ValidateFormコーディング部分2-親子通信を試行し
ます5-9ValidateFormコーディング部分3-検索対外援助ミット
5-10ValidateFormコーディングパート4-完了
第6章ファミリーバケットを食べてください-vue-routerとvuexの最初の使用
この章はSPAの概念から派生し、vue-routerのインストールを完了してから、その基本的な使用法を学びます。情報取得、ダイナミックジャンプ、フロントガード、メタ情報などのさまざまな知識ポイント、そして状態管理ツールの特定の定義が導入され、vuexとその状態、突然変異、ゲッター、その他の基本的な知識ポイントのインストールにつながります。..。
6-1 SPA（シングルページアプリケーション）アプリケーションとは何ですか？
6-2vue-routerのインストールと使用6-3vue -router
ルーティングの構成6-4vue
-routerルートの
追加6-5列の追加詳細ページ
6-6状態管理ツール
とは6-7Vuexの導入とインストール
6-8Vuex現在のアプリケーションを統合
する6-9Vuexゲッターを使用する
6-10新しい記事を追加するページ6-11Vue
ルータールーターガードを追加する-フロントガード6-12Vueルータールーターガードを
追加する-メタ情報を使用して権限管理を完了する
第7章フロントエンド統合-プロジェクト統合バックエンドインターフェイス
この章では、フロントエンドとバックエンドおよびRESTfulの概念の分離から始め、学生に提供されるスワッガーデバッグツールの使用方法を紹介し、次にvuexアクションの追加を通じて、axiosを紹介し、非同期変換とaxiosインターセプターの基本的な使用法を実現します。ローダーコンポーネントのコーディングおよび実装プロセスを抽象化します。
7-1フロントエンド開発とバックエンド開発の分離とは何ですか？
7-2 RESTful API設計コンセプト
7-3スワッガーオンラインドキュメントを使用してインターフェイスの詳細を表示します7-4axiosの
基本的な使用法と排他的なバックエンドAPIの使用法（必見）
7-5vuexアクションを使用して送信します非同期リクエスト
7-6vuexアクションを使用して非同期リクエストを送信するパート27-7非同期を使用して非同期リクエスト
を変換するのを待つ
7-8axiosインターセプターを使用して読み込み効果を追加する
7-9ローダーコンポーネントのコーディングパートI-
7-10ローダーコンポーネントの基本的な実装コーディングの2番目の部分-Teleportを使用して変換する
第8章PassageCredentials-Permission Management
この章では、トークンの取得から始めて、JWTユニバーサル認証ツールの原理と実装について説明し、次にaxios設定の一般ヘッダーと永続ログイン処理方法を完了します。 、次に、グローバルな一般的なエラー処理を追加し、最後に一般的なコンポーネントメッセージのコーディングと実装プロセスを抽象化しました。
8-1トークンを取得するために最初の部分にログインします
8-2jwtの操作メカニズム8-3axios
の2番目の部分に
ログインして共通ヘッダーを設定します8-4永続的なログインステータスの3番目の部分にログインします
8-5一般的なエラー処理
8-6メッセージコンポーネントの作成
8 -7メッセージコンポーネントが関数呼び出しフォームに改善されました
8-8割り当て：登録ページの準備
第9章-コンポーネントのアップロード
この章では、分析とコーディングからアップロードコンポーネントのプロセス全体を実装します。このプロセスでは、学習します。 To：ファイルのアップロード、axiosを使用したファイルのアップロード方法の完了、および複雑なコンポーネントの開発プロセスの段階的な完了の原則。
第10章最終機能-記事の編集と削除記事
の編集と削除機能を完了することで、以前のコンポーネントに残っていたいくつかのバグが明らかになりました。バグを解決することで、継続的な最適化のアイデアと解決策がもたらされ、最終的に一般的なモーダルが完成しました。コンポーネントのコーディングプロセス。
第11章継続的な最適化
分析を通じて、アプリケーションで最適化できる2つの部分を見つけ、アレイをオブジェクトに変更するためのストア最適化スキームと、繰り返しの要求を防ぐためのソリューションを提案してコーディングしました。最後に、useLoadMoreのロジック実装に加えて、複雑なカスタムフックがついに完成しました。
第12章のプロジェクトの構築と展開
は、実稼働環境の概念と、実稼働環境と開発環境の類似点と相違点から始まり、アプリケーション構築、オンライン化される構築コード、および構築コードの継続的な統合の一連の概念を実践します。
第13章コースの概要
この章では、コースの内容を確認します。
このコースは継続的に更新されます