Nuxt.js(三)视图详解
此篇篇我们续上篇学习哈!,
如果想了解前篇,可以自行查看哈!!话不多说,上货!!
一. 默认模板（了解）
- 编写的vue组件需要一个html页面进行挂载。
- vue组件最终都转换虚拟dom （内存中html代码），用户无法看到
- 需要将vue转换后的内容添加到一个HTML页面中
- nuxt默认模板名称 app.html
- 在后面的开发中，如果需要解决浏览器兼容问题，就需要修改模板。
定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。
默认模板：
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
修改模板，对低版本IE浏览器进行支持（兼容IE浏览器）
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
二… 默认布局【重点】
-
布局：Nuxt.js根据布局，将不同的组件进行组合。
-
模板：html页面，是布局后所有组件挂载的基础。
-
-
布局组件，负责组合其他组件。
- 在布局组件中，可以编写公共代码
-
布局组件
- 默认布局位置：~/layouts/default.vue
- 布局组件内容：
- 其他组件显示位置，使用 标签显示其他组件
- 组件切换，使用 进行切换
- 功能：编写公共导航
- 之后的开发，在默认布局中，来维护公共的css、js等资源。
三. 自定义布局
- 步骤一：在layouts目录下，创建自定义布局组件，例如：blog.vue
blog.vue:
<template>
<div>
<!-- 自定义布局只需要内容即可，不需要导航 -->
<nuxt/>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- 步骤二：在其他组件中，通过layout属性进行引入，例如：
export default {
layout: 'blog'
}
demo01.vue 其他组件中如何使用
<template>
<div>
目前使用的是自定义布局
</div>
</template>
<script>
export default {
layout:'blog'
}
</script>
<style>
</style>
- 思考：默认布局和自定义布局作用？
-
- 提供公共代码使用率。
四. 错误页面
-
错误页面：用于定制 个性化错误 页面。例如：404如何显示、500如何显示等
-
编写错误页面，需要2步骤：
- 步骤一：错误页面位置，~/layouts/error.vue
- 步骤二：错误页面内容，props确定异常变量
error.vue:
<template>
<div>
<!-- 错误页面,信息如下:{{error}} -->
<!-- 根据状态码显示定制信息 -->
<h1 v-if="error.statusCode == 404">页面不存在!!</h1>
<h1 v-else> 应用发生错误异常</h1>
<nuxt-link to="/">首页</nuxt-link>
</div>
</template>
<script>
export default {
props:['error'],
layout:'blog' //你可以为错误页面定义自定义布局
}
</script>
<style>
</style>
总结;
- 需要考虑 404 、500、连接超时（服务器关闭）
- 所学习的技术中，有2种方式处理错误页面
-
- 知识点1：路由中默认路由，可以解决404问题。（如果路由都不能匹配，将执行默认路由）
- 页面位置：~/pages/_.vue
- 知识点2：布局中错误页面，可以解决所有错误问题
- 页面位置：~/layouts/error.vue
- 获得异常信息：props: [‘error’]
- 知识点1：路由中默认路由，可以解决404问题。（如果路由都不能匹配，将执行默认路由）
-
五. Nuxt**.js**页面
-
页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项
-
-
Nuxt.js 的页面在vue的基础上，额外添加部分属性。
head属性演示
-
使用head属性可以设置页面标题、引入外部css文件、引入外部js文件 等
- 开发中由美工已经提供好了静态页面
- 我们vue中不希望再次编写css和js，可以采用导入外部文件的方式。
-
步骤一：创建demo02.vue ，编写head相关信息
<template>
<div>
head配置
</div>
<!-- <link rel="stylesheet" href="">
<script type="text/javascript" src=""></script> -->
</template>
<script>
export default {
head: {
title: '你瞅啥', //标题
link: [ //导入外部css文件
{rel:'stylesheet',href:'/style/img.css'}
],
script: [ //导入外部js文件
{ type: 'text/javascript', src: '/js/news.js' }
]
}
}
</script>
<style>
</style>
- 步骤二：创建 ~/static/style/img.css文件
div {
color : red;
}
•步骤三：创建 ~/static/js/news.js文件
请给努力中的自己点个赞哦!
*每天进步一点点`~~~~~*
原创文章 8
获赞 5
访问量 337