HyrKGsWebsite

はじめに紹介します

私の個人的なフロントエンドのゼロベース学習プロジェクト、タスク駆動型学習です。時々更新しますが、普段は仕事と勉強をしています。

☞プレビュー: http://hyrkg.cn

ようこそ右上隅↗️私のプロジェクトにスターを付けて、一緒に学び、前進しましょう!

私の計画のToDoリスト：

• 春のバックエンド
• システムにログインします (oauth2 を使用することが予想されます)
  • ローカルストレージとセッションストレージ
• VitePress を自分の Web サイトに埋め込む (難しそうです)
• 大きな計画！ ?ラウンドテーブル
  • フロントエンドインターフェース
  • 長いリンク、WebSocket でしょうか?
• vuex、まだ最初に勉強する必要があるような気がします。

完成しました！チェックリスト:

• (css) インターフェースをナイトモードと完全に互換性のあるものにする
• (vue-TransitionGroup) プレイグラウンドにクールなアニメーションを追加しましょう
• (vue、js) では、コンポーネントを無限に追加または削除できます。 HTML に直接書き込むのではなく、コンポーネントを読み込むリストを作成します。
• (vue、css) 私自身のフレックスコンテナコンポーネント!
• ?学習と遊び専用のページがあるのは素晴らしいことです。 ?遊び場が誕生！
• (vue-router) 個人のホームページにはナビゲーション バーは必要なく、単一ページの効果が必要です。ルート内で子を使用して、単一ページおよび一般的なページ関数を実装します。
• (vue-router) ナビゲーション機能を実装して、ナビゲーションバーを少し便利にしましょう!
• (vue、js) ボタンをクリックして要素 (応答リスト、計算プロパティ、リスニング コンポーネントの実装) を追加してみます。現在は?遊び場に移動しています
• (vue) カードを VUE コンポーネントにします!
• (css) カードのアニメーション効果を最適化します。マウスを置くとカードがホバリングします。
• (css) element-plusのナビゲーションバーを独自のものに変更しましょう！
• (CSS) 自分で作るフレックス（初期の頃は本当はグリッドだったのですが、後から知りました） スタイル
• (vue) ナイトモードに対応したロゴ
• (nginx) がサーバーにアップロードされました!
• vite+vue+element-ui(element-plus-vite-starter) を使用して独自の vue プロジェクトを構築します

⁉️ カバーされる知識:

私にはフロントエンド開発の経験がないので、実習中は Baidu、Google、またはドキュメントを読んで学びました。以下はすべて私の Web サイトにあり、学習パスに従って分類されています。参考として参照してください。

VUE

格言にあるように、古いものを学ぶのではなく、新しいものを学ぶのです。コンポーネント ライブラリは Alibaba の element-plus を使用します。

• [応答性の基本] reactive (これはあまり使用しません。すべてを直接参照します)、ref (参照されるオブジェクトが応答するようになります)、v-bind (よく使用されます)、{{}}
• 【文法の基礎】 v-if（常用）、v-for（常用）、v-on（常用）、v-model
• 【計算属性】計算
• [コンポーネント化] props (よく使われる)、スロット (名前、寺院。よく使われる)、イベントリターン[$emit]、透明属性
• 【ルーティング管理】vue-routerの基本設定（パス、リダイレクト、エイリアス、子、コンポーネント）
• 【アニメーション】Transition、TransitionGroup
• 【ナイトモード】原則はhtmlにクラス（ダーク）を追加する
• 【レスポンシブモニタリング】ウォッチ

JavaScript/TypeScript

• 【変数】var、let、const（よく使う変数）
• [オブジェクトの基本] array[]、object{} (マップとして使用します)、すべてがオブジェクトです (この時点で、ref を使用する前に値が必要な理由がわかります)
• 【メソッド、パラメータの受け渡し、再利用】 import、関数（すべてがオブジェクトであることを組み合わせると計算される原理が理解できる）

CSS/SCSS:

• 【スタイルの基本】
• 》》フォントスタイル：色、フォントサイズ、フォントファミリー（フォントは他の人のものを直接コピーしています）
• 》》コンテナスタイル：background-color、border-radius（角丸）、box-shadow（境界線の影）、border（境界線の描画、レイアウト設計時にいつもオンにしています）
• 【レイアウトの基本】padding(コンテナ内の距離調整)、margin(コンテナ外の距離調整)、width/height(100%自動で埋めることも可能、そうでないと見苦しくなります)、max-width/max-height
• [レスポンシブ (フレックス) レイアウトにより、ページを携帯電話と互換性のあるものにすることができます] 表示: flex、flex-direction、flex-wrap、justify-content、flex-grow (一般的に使用されます)
• 【アニメーションの基礎】トランジション、トランスフォーム、擬似クラス（例：ホバー）
• [スタイル優先]!import (私の悪い癖: 迷ったときは !import だけです)

HTML

特別な知識ポイントはなく、基本的なニーズについては Baidu を使用するだけのようです。

• div を使用して分割できるだけで、タグと構文を備えた div で基本的にほとんどのことを解決できます。
• ヒント！ Vue のテンプルタグはスタイルに影響しません。