Nuxt详解+案例_M_wzz_nuxt

未知 02-07 5784

Nuxt 1. Nuxt.js 概述1.1 我们一起做过的SPA1.2 什么是SEO1.3 什么是SSR技术1.4 SPA和SSR对比1.5 什么是Nuxt.js 2 入门案例2.1 create-nuxt-app 介绍2.2 安装2.3 启动2.4 访问 3. 目录结构3.1 目录3.2 别名 4 路由4.1 路由概述4.2 基础路由4.3 动态路由4.4 动态命名路由4.5 默认路由4.6 嵌套路由(懂就👌)4.7 过渡动效（了解就👌）4.7.1 全局过渡动效设置4.7.1 自定义动画 5. 视图5.1 默认模板（了解👌）5.2 默认布局5.2.1 布局概述5.2.2 布局分析5.2.3 公共导航 5.3 自定义布局5.4 错误页面5.5 Nuxt组件特殊配置5.5.1 模板代码5.5.2 head

1. Nuxt.js 概述 1.1 我们一起做过的SPA

SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。

我们之前学习的Vue就是SPA中的佼佼者。

SPA 应用广泛用于对SEO要求不高的场景中

1.2 什么是SEO

SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。

非常明显，SPA程序不利于SEO

SEO解决方案：提前将页面和数据进行整合

前端：采用SSR后端：页面静态化（freemarker 、thymeleaf、velocity）

1.3 什么是SSR技术

服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

在SSR中，前端分成2部分：前端客户端、前端服务端前端服务端，用于发送ajax，获得数据前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）

如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

1.4 SPA和SSR对比 SPA单页应用程序SSR服务器端渲染优势1.页面内容在客户端渲染2. 只关注View层，与后台耦合度低，前后端分离3.减轻后台渲染画面的压力1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面劣势1.首屏加载缓慢2.SEO(搜索引擎优化)不友好1.更多的服务器端负载2.涉及构建设置和部署的更多要求，需要用Node.js渲染3.开发条件有限制，一些生命周期将失效4.一些常用的浏览器API无法使用

1.5 什么是Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

Nuxt支持vue的所有功能，此类内容为前端客户端内容。Nuxt特有的内容，都是前端服务端内容。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

2 入门案例 2.1 create-nuxt-app 介绍

Nuxt.js 提供了脚手架工具 create-nuxt-app

create-nuxt-app 需要使用 npx

npx 命令为 NPM版本5.2.0默认安装组件

2.2 安装 npx create-nuxt-app <project-name> 例如 npx create-nuxt-app demo_nuxt02

nuxtjs改善

2.3 启动 npm run dev

2.4 访问 http://localhost:3000

3. 目录结构 3.1 目录目录名称描述assets资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件componentsvue组件目录，Nuxt.js 不会增强该目录，及不支持SSRlayouts布局组件目录pages页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。plugins插件目录static静态文件目录，不需要编译的文件storevuex目录nuxt.config.jsnuxt个性化配置文件，内容将覆盖默认package.json项目配置文件

3.2 别名

assets 资源的引用：~ 或 @

// HTML 标签 <img src="~assets/13.jpg" style="height:100px;width:100px;" alt=""> <img src="~/assets/13.jpg" style="height:100px;width:100px;" alt=""> <img src="@/assets/13.jpg" style="height:100px;width:100px;" alt=""> // CSS background-image: url(~assets/13.jpg); background-image: url(~/assets/13.jpg); background-image: url(@/assets/13.jpg);

static 目录资源的引用：/ 直接引用

//html标签 <img src="/12.jpg" style="height:100px;width:100px;" alt=""> //css background-image: url(/12.jpg);

实例

<template> <div>  <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">  <img src="/12.jpg" style="height:100px;width:100px;" alt="">  <div class="img1"></div> <div class="img2"></div> </div> </template> <script> export default { } </script> <style> .img1 { height: 100px; width: 100px; background-image: url(~assets/13.jpg); background-size: 100px 100px; display: inline-block; } .img2 { height: 100px; width: 100px; background-image: url(/12.jpg); background-size: 100px 100px; display: inline-block; } </style>

4 路由 4.1 路由概述 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间切换路由，我们建议使用<nuxt-link> 标签。标签名描述<nuxt-link>nuxt.js中切换路由<Nuxt />nuxt.js的路由视图<router-link>vue默认切换路由<router-view/>vue默认路由视图

4.2 基础路由自动生成基础路由规则路径组件位置及其名称规则/pages/index.vue默认文件 index.vue/userpages/user/index.vue默认文件 index.vue/user/onepages/user/one.vue指定文件

实例

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称） - 资源位置： ~/pages/user/one.vue - 访问路径：http://localhost:3000/user/one 情况2：每一个目录下，都有一个默认文件 index.vue - 资源位置： ~/pages/user/index.vue - 访问路径：http://localhost:3000/user

思考：/user 可以匹配几种文件？

pages/user.vue 文件【优先级高】pages/user/index.vue 文件

4.3 动态路由在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。路由中路径匹配组件位置及其名称/pages/index.vue/user/:idpages/user/_id.vue/:slugpages/_slug/index.vue/:slug/commentspages/_slug/comments.vue

实例1：获得id值，创建资源 user/_id.vue <template> <div> 查询详情 {{this.$route.params.id}} </div> </template> <script> export default { transition: 'test', mounted() { console.info(this.$route) }, } </script> <style> </style>

4.4 动态命名路由

路径 /news/123 匹配_id.vue还是_name.vue ？

我们可以使用<nuxt-link>解决以上问题

通过name 确定组件名称：“xxx-yyy”通过params 给对应的参数传递值 <nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link> <nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>

4.5 默认路由路径组件位置及其名称不匹配的路径pages/_.vue

404页面，可以采用 _.vue进行处理

4.6 嵌套路由(懂就👌)

创建嵌套子路由，你需要添加一个父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

要求：父组件使用<nuxt-child/> 显示子视图内容 pages/ --| book/ //同名文件夹 -----| _id.vue -----| index.vue --| book.vue //父组件

步骤1：编写父组件 pages/child/book.vue

<template> <div> <nuxt-link to="/child/book/list">书籍列表</nuxt-link> | <nuxt-link to="/child/book/123">书籍详情</nuxt-link> | <hr> <nuxt-child /> </div> </template> <script> export default { } </script> <style> </style>

步骤2：编写子组件 pages/child/book/list.vue

<template> <div>书籍列表</div> </template> <script> export default { } </script> <style> </style>

步骤3：编写子组件 pages/child/book/_id.vue

<template> <div>书籍详情{{$route.params.id}} </div> </template> <script> export default { } </script> <style> </style>

4.7 过渡动效（了解就👌） 4.7.1 全局过渡动效设置

Nuxt.js 默认使用的过渡效果名称为 page

.page-enter-active样式表示进入的过渡效果。.page-leave-active样式表示离开的过渡效果。

步骤1：创建 assets/main.css，编写如下内容：

.page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }

步骤2：nuxt.config.js 引入main.css文件

module.exports = { css: [ 'assets/main.css' ] } 4.7.1 自定义动画

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

步骤1：在全局样式 assets/main.css 中添加名称为test的过渡效果

.test-enter-active, .test-leave-active { transition: all 2s; font-size:12px; } .test-enter, .test-leave-active { opacity: 0; font-size:40px; }

步骤2：需要使用特效的vue页面编写如下：

export default { transition: 'test' }

5. 视图 5.1 默认模板（了解👌）

定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

默认模板：

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

修改模板，对低版本IE浏览器进行支持（兼容IE浏览器）

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

5.2 默认布局 5.2.1 布局概述

布局：Nuxt.js根据布局，将不同的组件进行组合。

模板：html页面，是布局后所有组件挂载的基础。

5.2.2 布局分析 layouts/default.vue 默认布局组件访问路径根据路由，确定执行组件组件具体显示的位置，有布局来确定

5.2.3 公共导航修改 layouts/default.vue <template> <div> <nuxt-link to="/">首页</nuxt-link> | <nuxt-link to="/user/login">登录</nuxt-link> | <nuxt-link to="/user/123">详情</nuxt-link> | <nuxt-link to="/about">默认页</nuxt-link> | <nuxt-link to="/nuxt/async">async</nuxt-link> | <hr/> <Nuxt /> </div> </template>

5.3 自定义布局

在layouts目录下创建组件：layouts/blog.vue

<template> <div> 开头<br/> <nuxt/> 结束<br/> </div> </template> <script> export default { } </script> <style> </style>

在需要的视图中使用 blog布局

5.4 错误页面编写layouts/error.vue页面，实现个性化错误页面 <template> <div> <div v-if="error.statusCode == 404"> 404 页面不存在 {{error.message}} </div> <div v-else> 应用程序错误 </div> <nuxt-link to="/">首页</nuxt-link> </div> </template> <script> export default { props: ['error'] } </script> <style> </style> 解决问题： 404 、500、连接超时（服务器关闭）总结：所学习的技术中，有2种方式处理错误页面方式1：默认路径，_.vue （先执行）方式2：错误页面，~/layouts/error.vue

5.5 Nuxt组件特殊配置页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项特殊配置项描述asyncDataSSR进行异步数据处理，也就是服务器端ajax操作区域。fetch在渲染页面之前获取数据填充应用的状态树（store）head配置当前页面的 Meta 标签layout指定当前页面使用的布局transition指定页面切换的过渡动效scrollToTop布尔值，默认: false。用于判定渲染页面前是否需要将当前页面滚动至顶部。

5.5.1 模板代码 <template> <h1 class="red">Hello {{ name }}!</h1> </template> <script> export default { //异步处理数据, 每次加载之前被调用 asyncData (context) { // called every time before loading the component return { name: 'World' } }, //用于在渲染页面之前获取数据填充应用的状态树（store） fetch () { // The fetch method is used to fill the store before rendering the page }, //配置当前页面的 Meta 标签 head: { // Set Meta Tags for this Page }, // and more functionality to discover ... } </script> <style> .red { color: red; } </style>

5.5.2 head

html模板代码

通过nuxt提供head属性，可以给单个也是设置：标题、外部css、外部js 等内容。

<template> <div> 详情页 {{$route.params.id}} <br/> <div class="bg2"></div> <div class="bg3"></div> </div> </template> <script> export default { head: { title: '详情页', link: [ {rel:'stylesheet',href:'/style/img.css'},.... ], script: [ { type: 'text/javascript', src: '/js/news.js' } ] } } </script> <style> .bg2 { background-image: url('~static/img/2.jpg'); width: 300px; height: 300px; background-size: 300px; } </style>