フロントエンドテンプレートエンジンjadeを学ぶ(1)_html/css_WEB-ITnose

1. なぜ Jade を学ぶ必要があるのですか?

1. 通常、ほとんどのフロントエンド開発担当者が最初にフロントエンド開発に入るとき、彼らは単純に HTML ページを作成し、それをバックエンド開発に投げ、バックエンド開発はそれを埋め込みます。テンプレート。
2. ますます大きくなるフロントエンド ページの場合、HTML コンテンツを埋め込むために古い文字列スプライシング方法を依然として使用することは、現在の開発トレンドにはもはや適していません。
3. これ以上ナンセンスはやめて、本題に入りましょう。

2. Jade のインストールを開始します。

1. jadeはnodejs開発環境に基づいているため、最初にnodejsをインストールする必要があります。nodejsのインストール方法は実際には非常に複雑なので、手間を省くためにBaiduまたはGoogleに直接アクセスしてください。 nodejs インストールパッケージをダウンロードして直接インストールするだけで十分です。
2. 2 番目のステップは、npm パッケージ管理ツールをインストールすることです。ノード環境では、grunt がインストールされていないと作業できません。
3. jadeプラグインのインストールを開始します。 インストールコマンドは次のとおりです。

3. jade を使用してフロントエンド テンプレートの構築を開始します。

1. まず、jade というフォルダーを作成し、次に jade.jade という jade ファイルを作成します。

2. jadeファイルにjadeサイズのテンプレートコードを書きますが、これは実際には理解しやすいものです。

3. 上記のコードは、通常のフロントエンド HTML ファイルを作成するものですが、その仕様は、jade の仕様になっています。 次に、cmd コマンド ライン ツールを入力して、cd を実行します。現在の jade ファイルについては、同じディレクトリに圧縮された html ファイルが生成されることがわかります。

4. 圧縮されている場合は、-P を追加することで解凍できます。テンプレートを変更するたびにコマンドラインを入力するのが面倒な場合は、jade -P -w jade.jade を追加します。 -w は監視モードをオンにします。テンプレートが変更されるたびに、HTML ファイルが自動的にコンパイルされます。

5. 生成されたhtmlファイルを見てみましょう 通常のhtml domツリーが生成されましたか？

4. 翡翠の仕様に精通しています。

1. 図からわかるように、子要素はインデントする必要があります。
2. ラベルとテキストには空白行が必要です。