nuxt讲解与案例

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.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若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，不需要编译的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
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>
      <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
      <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
  
      <!-- 引用 static 目录下的图片 -->
      <img src="/12.jpg" style="height:100px;width:100px;" alt="">
  
      <!-- css -->
      <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
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/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/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_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'
  }
  

4.8 案例：学生管理

• 需求1：首页

  

• 需求2：点击&