純粋な Xiaobai がフロントエンド開発を学ぶのに時間がかかり、学習教材を見つけるのにも時間がかかり、その後の設定環境もかなり遠回りしました。ここでは、ここ数日の学習教材と学習教材を整理します。簡単なまとめを作ります。
1. vue についての予備的な理解
Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑なシングルページ アプリケーションを実行することもできます。
2. vueを学ぶ前に必要な基礎知識
2.1HTML
参考リンク：html入門
HTMLとは、Webページを記述するために使用される言語です。
- HTML は Hypertext Markup Language の略です: HyperText Markup Language
- HTMLはプログラミング言語ではなく、マークアップ言語です
- マークアップ言語はマークアップ タグのセットです
- HTML はマークアップ タグを使用して Web ページを記述します
- HTML ドキュメントには HTML タグとテキスト コンテンツが含まれます
- HTML ドキュメントは Web ページとも呼ばれます
2.2CSS
参考リンク：css入門
CSSとはカスケードスタイルシート（Cascading Style Sheets）のことを指します。
- スタイルは HTML 要素の表示方法を定義します
- スタイルは通常、スタイルシートに保存されます
- HTML 4.0 にスタイルを追加すると、コンテンツとプレゼンテーションの分離の問題が解決されます。
- 外部スタイルシートで作業効率が大幅に向上
- 外部スタイルシートは通常、CSS ファイルに保存されます
- 複数のスタイル定義を 1 つにカスケードできます
2.3 JavaScript
参考リンク：js入門
JavaScriptはスクリプト言語です。
- JavaScript は軽量のプログラミング言語です
- JavaScript は HTML ページに挿入できるプログラミング コードです
- HTML ページに挿入された JavaScript は、最新のすべてのブラウザで実行できます。
2.4 HTML、CSS、JavaScript、Vueの関係
Web ページは主に、構造、プレゼンテーション、動作の 3 つの部分で構成されます。
- HTML - 構造。Web ページの構造とコンテンツ (「内容」) を決定します。
- CSS - プレゼンテーション (スタイル)、Web ページのプレゼンテーション スタイル (「どのように見えるか」) を設定します。
- JavaScript (JS) - 動作、Web ページの動作を制御します (「何をするか」)
3. 実践的な Web 開発
参考リンク：Web開発を学ぶ
フロントエンド三銃士を簡単に理解した後は、理解を高めるために練習する必要がありますが、上記のリンクをたどれば簡単にWeb開発を行うことができます。
開発ソフトとしてvscodeが使いやすいのでインストールすることをおすすめします。
画像は呼び出された画像を保存し、
.html ファイルは Web 開発の主要なコンテンツ、
スタイルは Web を変更するために使用される CSS、
スクリプトは JavaScript で Web を制御します。
最終的な Web 表示結果は次の図に示されています。
上記はフロントエンドの予備的な理解に役立ちます。個人的な意見では、上記の 4 つのリンクは非常に役立ちます。
概要:
html 学習リンク
css 学習リンク
js 学習リンク
Web 開発学習