關于pug的筆記

syoya 發布于2019-08-02 11:09 / 2046人閱讀

摘要：一簡介是一款健壯靈活功能豐富的模板引擎專門為平臺開發。注意編寫是空格和不能同時使用，否則會發生編譯失敗的現象。下面給大家展示一些關于的簡單的語法百度上面是里的代碼下面是里的代碼編譯后的百度

一、簡介

Pug 是一款健壯、靈活、功能豐富的模板引擎,專門為 Node.js 平臺開發。Pug 是由 Jade 改名而來，他可以幫助我們寫html的時候更加的簡單明了。
安裝、使用pug的過程
打開cmd
直接輸入npm install pug-cli -gd
最后顯示出如圖的樣子就安裝成功了：

創建一個文件夾在文件夾中創造一個index.pug和name.bat的文件,然后在用記事本打開文件name.bat然后輸入pug pug -P("P"為大寫) -o a -w,雙擊name.bat就會自動創建一個a文件，在a文件中還會自動生成index.html即可在index.pug中編寫index.html,簡單明了。

注意編寫index.pug是空格和tab不能同時使用，否則會發生編譯失敗的現象。

下面給大家展示一些關于pug的簡單的語法


html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
        link(rel="stylesheet", href="../css/index1.css")
    body
        div(class="div1")
        div(class="div2")

        a(class="button" href="http://www.baidu.com") 百度
        ="
"
        input(
        type="checkbox"
        name="agreement"
        checked
        )

（上面是index.pug里的代碼）

（下面是index.html里的代碼<編譯后的>）




Document


百度

GPU云服務器云服務器 pug html(pug) 關于樣式的服務器在國外的云筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52803.html

關于pug的筆記

摘要：一簡介是一款健壯靈活功能豐富的模板引擎專門為平臺開發。注意編寫是空格和不能同時使用，否則會發生編譯失敗的現象。下面給大家展示一些關于的簡單的語法百度上面是里的代碼下面是里的代碼編譯后的百度一、簡介 Pug 是一款健壯、靈活、功能豐富的模板引擎,專門為 Node.js 平臺開發。Pug 是由 Jade 改名而來，他可以幫助我們寫html的時候更加的簡單明了。安裝、使用pug的過程打開c...

cgh1999520 2019-08-29 16:17 評論0 收藏0
從零開始的webpack生活-0x010：TemplatingLoader裝載模板

摘要：概述上一章講的時候關于文件相關的，這一章講的是模板相關的。環境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結果可以看到，被打包成了字符串，并封裝成模塊導出。更多資源，請查閱的倉庫和官網資源源代碼 0x001 概述上一章講的時候關于文件相關的loder，這一章講的是模板相關的loder。 0x002 環境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 評論0 收藏0
用vue和node寫的簡易購物車

摘要：配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出，減少頁面請求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

QiShare 2019-08-29 12:29 評論0 收藏0
用vue和node寫的簡易購物車

摘要：配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出，減少頁面請求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

Binguner 2019-08-20 16:04 評論0 收藏0
用vue和node寫的簡易購物車

摘要：配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出，減少頁面請求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

Honwhy 2019-08-01 16:43 評論0 收藏0