nuxt---02---静态资源、默认布局和默认模版

最新推荐文章于 2024-05-15 09:32:58 发布

Kratial

最新推荐文章于 2024-05-15 09:32:58 发布

阅读量1k

点赞数

分类专栏： nuxt服务端渲染框架文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Kratial/article/details/122428425

版权

nuxt服务端渲染框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.静态资源的访问
默认情况下, vue-loader自动使用 css-loader 和 Vue 模板编译器来编译处理 vue 文件中的样式和模板。在此编译过程中，所有的资源 URL 例如img标签中的src、 background: url(…) 和 CSS 中的 @import 均会被解析成模块通过 require 引用。

"~"该符号表示匹配到根目录下

// 在style标签中
background-image: url(~static/idol.jpeg);
// img标签上
<img src="~static/idol.jpeg"/>

2.默认布局
对页面具有统一的布局
layouts文件夹下默认布局default.vue
在这里插入图片描述
错误页面为error.vue

也可以针对某个路由匹配的视图页面特定的布局：

在layouts文件夹下面创建一个sp1.vue的布局文件

sp1.vue
在页面中配置layout: ‘sp1’

错误页面error.vue也可以指定特定的布局：

3.默认模版：
根目录下面创建的名为app.html的文件：这里的HEAD读取的是nuxt.config.js中的配置信息，APP变量就是pages下面的视图文件了，这里的变量需要大写，涉及该文件的操作需要重启项目。

<!DOCTYPE html>
<html>
  <head>
    {{ HEAD }}
  </head>
  <body>
    {{ APP }}
  </body>
</html>

Kratial

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nuxt---02---静态资源、默认布局和默认模版

1.静态资源的访问默认情况下, vue-loader自动使用 css-loader 和 Vue 模板编译器来编译处理 vue 文件中的样式和模板。在此编译过程中，所有的资源 URL 例如img标签中的src、 background: url(…) 和 CSS 中的 @import 均会被解析成模块通过 require 引用。"~"该符号表示匹配到根目录下// 在style标签中background-image: url(~static/idol.jpeg);// img标签上<img
复制链接

扫一扫