這次給大家?guī)韓ode前端開發(fā)模板引擎Jade使用步驟詳解，node前端開發(fā)模板引擎Jade使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
隨著 web 發(fā)展，前端應(yīng)用變得越來越復(fù)雜，基于后端的 javascript(Node.js) 也開始嶄露頭角，此時(shí)? javascript 被寄予了更大的期望，與此同時(shí) javascript MVC 思想也開始流行起來。為了使用戶界面與業(yè)務(wù)數(shù)據(jù)（內(nèi)容）分離，就產(chǎn)生了『模板引擎』這個(gè)概念。
說的簡單點(diǎn)，模板引擎就是一個(gè)字符串中有幾個(gè)變量待定，通過模板引擎函數(shù)把數(shù)據(jù)動(dòng)態(tài)的塞進(jìn)去。
今天我們就來聊一聊 Jade 的使用方法和語法說明。Jade官網(wǎng)：jade-lang.com/
Jade 命令行工具
Jade 的使用需要依賴 Node環(huán)境，通過 npm 包進(jìn)行安裝 Jade 命令行工具，安裝成功之后就可以新建一個(gè)文件，文件后綴名為 *.jade。我們就可以盡情的使用 jade 的語法咯，寫完之后只需要通過命令行工具進(jìn)行編譯即可編譯為我們平時(shí)使用的 html 靜態(tài)文件。
安裝方法
1、首先確定是否安裝有 Node 環(huán)境和 npm 工具，查看方法如下：
在命令行工具中執(zhí)行如下代碼：
node?-v =>?v0.10.35 npm?-v =>?1.4.28 //?如果成功返回版本號(hào)信息即為已成功安裝?Node?環(huán)境。
2、通過 npm 全局安裝 Jade 命令行工具
npm?install?jade?-g //?mac用戶可能需要管理員權(quán)限，使用如下命令 sudo?npm?install?jade?-g
3、創(chuàng)建 *.Jade 文件，開始任務(wù)。
4、通過使用 Jade 命令行工具將 jade 文件編譯為 html 文件
Jade 命令行工具使用方法
我們可以通過 jade --help 查看 Jade 命令行工具的使用參數(shù)
jade?--help
Usage:?jade?[options]?[dir|file?...]
?Options:
??-h,?--help?????output?usage?information?/?輸出使用信息
??-V,?--version???output?the?version?number?/?輸出版本號(hào)信息
??-O,?--obj?<str>??javascript?options?object?/?傳輸?shù)?jade?文件中的數(shù)據(jù)對(duì)象
??-o,?--out?<dir>??output?the?compiled?html?to?<dir>?/?輸出編譯后的?HTML?到?<dir>?
??-p,?--path?<path>?filename?used?to?resolve?includes?/?在處理?stdio?時(shí)，查找包含文件時(shí)的查找路徑
??-P,?--pretty????compile?pretty?html?output?/?格式化編譯?html?文件
??-c,?--client????compile?function?for?client-side?runtime.js?/?編譯瀏覽器端可用的?runtime.js
??-n,?--name?<str>??The?name?of?the?compiled?template?(requires?--client)?/?編譯模板的名字
??-D,?--no-debug???compile?without?debugging?(smaller?functions)?/?關(guān)閉編譯的調(diào)試選項(xiàng)(函數(shù)會(huì)更小)
??-w,?--watch????watch?files?for?changes?and?automatically?re-render?/?監(jiān)聽文件改變并自動(dòng)刷新編譯結(jié)果
??--name-after-file?Name?the?template?after?the?last?section?of?the?file?path?(requires?--client?and?overriden?by?--name)
??--doctype?<str>??Specify?the?doctype?on?the?command?line?(useful?if?it?is?not?specified?by?the?template)?/?在命令行中指定文檔類型(如果在模板中沒有被指定)
?Examples:
??#?編譯整個(gè)目錄
??$?jade?templates
??#?生成?{foo,bar}.html
??$?jade?{foo,bar}.jade
??#?在標(biāo)準(zhǔn)IO下使用jade
??$?jade?< my.jade >?my.html
??#?在標(biāo)準(zhǔn)IO下使用jade
??$?echo?'h1?Jade!'?|?jade
??#?foo,?bar?目錄渲染到?/tmp
??$?jade?foo?bar?--out?/tmp
實(shí)例：
//?比如說我們需要編譯index.jade文件，默認(rèn)編譯到同文件夾下的同名html?文件中 jade?index.jade //?如果我們要格式化輸出?index.html?文件，只需要添加?-P?參數(shù)即可 jade?-P?index.jade //?如果我們要實(shí)現(xiàn)監(jiān)聽和自動(dòng)編譯，需要使用?-w?參數(shù) jade?-P?-w?index.jade
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
nodeJS服務(wù)器創(chuàng)建與重啟操作代碼分享
Atas ialah kandungan terperinci node前端開發(fā)模板引擎Jade使用步驟詳解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
Mar 05, 2025 pm 05:57 PM
Penjelasan dan Panduan Pemasangan Terperinci untuk Pinetwork Nodes Artikel ini akan memperkenalkan ekosistem pinetwork secara terperinci - nod pi, peranan utama dalam ekosistem pinetwork, dan menyediakan langkah -langkah lengkap untuk pemasangan dan konfigurasi. Selepas pelancaran Rangkaian Ujian Blockchain Pinetwork, nod PI telah menjadi bahagian penting dari banyak perintis yang aktif mengambil bahagian dalam ujian, bersiap sedia untuk pelepasan rangkaian utama yang akan datang. Jika anda tidak tahu kerja pinet, sila rujuk apa itu picoin? Berapakah harga untuk penyenaraian? Penggunaan PI, perlombongan dan analisis keselamatan. Apa itu Pinetwork? Projek Pinetwork bermula pada tahun 2019 dan memiliki syiling pi cryptocurrency eksklusifnya. Projek ini bertujuan untuk mewujudkan satu yang semua orang boleh mengambil bahagian
Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod
Mar 28, 2023 pm 07:28 PM
Bagaimana untuk mengendalikan muat naik fail? Artikel berikut akan memperkenalkan kepada anda cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod saya harap ia akan membantu anda!
Analisis mendalam tentang alat pengurusan proses Node 'pm2'
Apr 03, 2023 pm 06:02 PM
Artikel ini akan berkongsi dengan anda alat pengurusan proses Node "pm2", dan bercakap tentang mengapa pm2 diperlukan, cara memasang dan menggunakan pm2, saya harap ia akan membantu semua orang!
Pengesahan berasaskan token dengan Angular dan Node
Sep 01, 2023 pm 02:01 PM
Pengesahan adalah salah satu bahagian terpenting dalam mana-mana aplikasi web. Tutorial ini membincangkan sistem pengesahan berasaskan token dan cara ia berbeza daripada sistem log masuk tradisional. Pada penghujung tutorial ini, anda akan melihat demo berfungsi sepenuhnya yang ditulis dalam Angular dan Node.js. Sistem Pengesahan Tradisional Sebelum beralih kepada sistem pengesahan berasaskan token, mari kita lihat sistem pengesahan tradisional. Pengguna memberikan nama pengguna dan kata laluan mereka dalam borang log masuk dan klik Log Masuk. Selepas membuat permintaan, sahkan pengguna di bahagian belakang dengan menanyakan pangkalan data. Jika permintaan itu sah, sesi dibuat menggunakan maklumat pengguna yang diperoleh daripada pangkalan data dan maklumat sesi dikembalikan dalam pengepala respons supaya ID sesi disimpan dalam penyemak imbas. Menyediakan akses kepada aplikasi tertakluk kepada
Templat e-mel PHP: menyesuaikan dan memperibadikan kandungan e-mel anda.
Sep 19, 2023 pm 01:21 PM
Templat e-mel PHP: Peribadikan dan peribadikan kandungan e-mel anda Dengan populariti dan penggunaan e-mel yang meluas, templat e-mel tradisional tidak lagi dapat memenuhi keperluan orang ramai untuk kandungan e-mel yang diperibadikan dan diperibadikan. Kini kita boleh mencipta templat e-mel yang disesuaikan dan diperibadikan dengan menggunakan bahasa pengaturcaraan PHP. Artikel ini akan menunjukkan kepada anda cara menggunakan PHP untuk mencapai matlamat ini dan memberikan beberapa contoh kod khusus. 1. Buat templat e-mel Pertama, kita perlu mencipta templat e-mel asas. Templat ini boleh menjadi HTM
Templat Metaprogramming dalam C++ FAQ Soalan Temuduga
Aug 22, 2023 pm 03:33 PM
C++ ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pelbagai bidang Pemrograman meta templatnya ialah teknologi pengaturcaraan lanjutan yang membolehkan pengaturcara mengubah jenis dan nilai pada masa penyusunan. Metaprogramming templat ialah topik yang dibincangkan secara meluas dalam C++, jadi soalan yang berkaitan dengannya agak biasa dalam temu bual. Berikut ialah beberapa soalan temu bual pengaturcaraan templat biasa dalam C++ yang mungkin ditanya kepada anda. Apakah itu metaprogramming templat? Metaprogramming templat ialah teknik untuk memanipulasi jenis dan nilai pada masa penyusunan. Ia menggunakan templat dan metafungsi untuk menjana berdasarkan jenis dan nilai
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs?
Feb 24, 2023 pm 07:33 PM
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs? Artikel berikut akan memperkenalkan kepada anda cara menggunakan nod untuk melaksanakan sistem log masuk tunggal. Saya harap ia akan membantu anda!
Bagaimana untuk menambah topeng PPT
Mar 20, 2024 pm 12:28 PM
Berkenaan PPT masking, pasti ramai yang tidak faham dengannya ketika membuat PPT, tetapi hanya mengada-ngada untuk membuat apa yang mereka suka Oleh itu, ramai yang tidak tahu apa itu PPT masking, dan mereka juga tidak faham Saya tahu apa yang dilakukan oleh topeng ini, dan saya tidak tahu bahawa ia boleh menjadikan gambar itu kurang membosankan. Jadi, bagaimana untuk menambah topeng PPT? Sila baca di bawah. 1. Mula-mula kita buka PPT, pilih gambar kosong, kemudian klik kanan [Set Background Format] dan pilih warna pepejal. 2. Klik [Insert], word art, masukkan perkataan 3. Klik [Insert], klik [Shape]
