nuxt.js ‘默认模板’ 和 ‘默认布局’

今天药忘吃喽~ 2022-10-04 13:59 199阅读 0赞

## 默认模板 ##

**1，在根目录下新建 app.html 文件**

**2，app.html 文件中引入head部分 和pages的部分**

<!DOCTYPE html>
    <html lang="en">
    <head>
        
        {
       { HEAD }}
    </head>
    <body>
        
        <p style="color: red;">修改默认模板</p>
        
        {
       { APP }}
    </body>
    </html>

**3，页面呈现效果：所有页面被添加**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]

## 默认布局 : 和默认模板不同，默认布局只能修改template里面的东西，head以上的不能修改 ##

**1，在根目录下的layouts文件夹下**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]  
**2，修改文件，其他页面也同样会添加p标签**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221004/7a06198001d44310b59c2941a01f54d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221004/e761f272c5034f4b9ee5f0ebb70fdbd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/1cc6c7c9bb5c45aabf87a2b76a960942.png