ゼロベースの初心者向けフロントエンド - 新しいプロジェクト

基礎のない初心者向けに、vscode を使用して新しいフロントエンド プロジェクトを作成し、HTML ページを作成して実行する方法を説明します。

いくつかの手順を実行する必要があります。

  1. 新しいフォルダーを作成する
  2. フォルダー内に、xxx.htmlたとえばという名前の新しいファイルを作成します。index.html
  3. vscodeを開き、「ファイル」→「フォルダーを開く」で作成したフォルダーを開きます。
  4. Index.html のコードを編集します。vscode の組み込みコードは機能しません。HTML を記述して Enter キーを押すだけで、次のコードが生成されます。
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my webpage</title>
</head>
<body>
    <h1>Welcome to my webpage!</h1>
</body>
</html>
  1. 内部のタイトルと h1 コンテンツを変更すると、シンプルなフロントエンド ページが生成されます
  2. 「index.html」を右クリックして、ブラウザで開くことを選択してください。HTML
    画像の説明を追加してください
    ファイルを継続的に変更してテストしたい場合は、VS Code の「表示」-「ターミナル」を選択し、次のコマンドを入力して一時的な Web サーバーを起動します。 . Python環境はすでにインストールされています
python -m http.server

一時的な Web サーバーを起動する主な目的は、ローカル コンピューター上に Web サーバー環境を提供し、Web サイトまたは Web アプリケーションをブラウザーでライブでプレビューおよびテストすることです。

通常、ファイル プロトコルを使用して HTML ファイルをローカルで開くことには制限があります。たとえば、一部のブラウザでは、ファイル プロトコル (file://) を使用してクロスオリジン リソースを読み込むことができません。したがって、これらの制限を回避する HTTP プロトコル (http://localhost:8000/index.html) を使用する方法をお勧めします。

単純な Web サーバーは、ターミナルにコマンド python -m http.server を入力することですぐに作成できます。このコマンドは、現在のディレクトリで Web サーバーを起動し、デフォルトでポート 8000 をリッスンします。ブラウザで http://localhost:8000 にアクセスすると、プロジェクト ファイルを表示できます。

この Web サーバーは、ローカルのテストと開発のための単なる単純なサーバーであり、運用環境では使用しないことに注意してください。実稼働環境では、多くの場合、より強力でスケーラブルで安全な Web サーバーが必要になります。

具体的な操作は以下の通りです。

  1. CD でフォルダーに移動します
  2. Pythonのバージョンを確認し、インストールされていない場合は、最初にインストールしてください
  3. Python -m http.server
~ python --version                                
Python 3.9.6~ cd /Users/morris/Desktop/test 
➜  test python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

画像の説明を追加してください
サービス開始後にindex.htmlを開くか、localhost:8080を直接使用してページにアクセスしてください。

おすすめ

転載: blog.csdn.net/Morris_/article/details/130981614