Nuxt.js知识

太过爱你忘了你带给我的痛 2023-10-02 21:28 22阅读 0赞

**目录**

1，Nuxt.js概述

1.1：学习过的SPA

1.2：什么是SEO

1.3：什么是SSR技术

1.4：SPA和SSR对比

1.5：什么是Nuxt.js

2，入门案例

2.1：create-nuxt-app介绍

2.2：安装

2.3：启动

2.4：访问

2.5：注意

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.2：自定义动画

--------------------

## 1，Nuxt.js概述 ##

### 1.1：学习过的SPA ###

*  SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。
 *  我们之前学习的Vue就是SPA中的佼佼者。
 *  SPA 应用广泛用于对SEO要求不高的场景中![727f25029dc94d0dba561a12fbc15ab4.png][]

### 1.2：什么是SEO ###

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

![3aa78ea4cc0f49c3846305fa6956b831.png][]

![c811ae2c11144be2a4ab7d98405be575.png][]

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

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

### 1.3：什么是SSR技术 ###

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

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

![2d6f6485a9ad4b048ed332f6893b5bb8.png][]

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

### 1.4：SPA和SSR对比 ###

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

### 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默认安装组件

![727f725ea1c24b3d8f1552e0f85afab0.png][]

### 2.2：安装 ###

> npx create-nuxt-app learn\_nuxt

![1569c8a447894b59b6196af4c4bf4266.png][]

![f21fe1ed516c47ebad3e460256774e4b.png][]

### 2.3：启动 ###

npm run dev

![3c076f077d4845db9e237b9397939402.png][]

nuxtjs改善

![40d63ef416874898ba56e19fc0f78203.png][]

### 2.4：访问 ###

![381d0ee5171c4f608a9b25be790b98dc.png][]

### 2.5：注意 ###

安装时：以管理员方式运行vs，不然在安装过程中会显示没有权限错误ERROR

![c6b987bf0c4d40c4b21b1078d135262d.png][]

## 3，目录结构 ##

### 3.1：目录 ###

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

![98e6d588a3ab4484ac68fd1d49693926.png][]

### 3.2：别名 ###

assets 资源的引用：~ 或 @

<img src="@/assets/java.jpeg">
            <img src="~/assets/java.jpeg">
            <img src="~assets/java.jpeg">

![9382e3639ab24515b3f4851af6cf4811.png][]

![a29c421795f148fc805be8624a95f953.png][]

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

<img src="/java.jpeg">

![383d668ef07e41a2a25ac4a477e48d9b.png][]

![ce2e59f5564c4729b74c0951ffa4de51.png][]

## 4，路由 ##

### 4.1：路由概述 ###

*  Nuxt.js 依据 **pages** 目录结构自动生成 vue-router 模块的路由配置。
 *  要在页面之间切换路由，我们建议使用`<nuxt-link>` 标签。

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;nuxt-link&gt;</code></td> 
   <td>nuxt.js中切换路由</td> 
  </tr> 
  <tr> 
   <td><code>&lt;Nuxt /&gt;</code></td> 
   <td>nuxt.js的路由视图</td> 
  </tr> 
  <tr> 
   <td><code>&lt;router-link&gt;</code></td> 
   <td>vue默认切换路由</td> 
  </tr> 
  <tr> 
   <td><code>&lt;router-view/&gt;</code></td> 
   <td>vue默认路由视图</td> 
  </tr> 
 </tbody> 
</table>

### 4.2：基础路由 ###

*  自动生成基础路由规则

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
   <th>规则</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
   <td>默认文件 index.vue</td> 
  </tr> 
  <tr> 
   <td>/user</td> 
   <td>pages/user/index.vue</td> 
   <td>默认文件 index.vue</td> 
  </tr> 
  <tr> 
   <td>/user/one</td> 
   <td>pages/user/one.vue</td> 
   <td>指定文件</td> 
  </tr> 
 </tbody> 
</table>

*  实例
    
        情况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` 文件

![ab414b3aadf44c3095a9301612a33865.png][]

### 4.3：动态路由 ###

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

*  实例1：获得id值，创建资源 `user/_id.vue`

![1d001ec972de43c3b6fad03bf7c816e3.png][]

![594fe615dc364048bf91698ad82b953c.png][]

实例；

![aa29b29286014623a9ca44c7f41da754.png][]

### 4.4：动态命名路由 ###

*  路径 `/news/123` 匹配`_id.vue`还是`_name.vue` ？
    
    ![82c446c3cfcc4d2aa478e8e87c584b24.png][]

*  我们可以使用`<nuxt-link>`解决以上问题
    
     *  通过name 确定组件名称：“xxx-yyy”
     *  通过params 给对应的参数传递值

![b1af22dd94c94807a820cda41e0f6f8c.png][]

<nuxt-link to="/img/ShowImage">目录-别名</nuxt-link>|
      <nuxt-link :to="{name:'news-id',params:{id:'123'}}">动态命名路由-id</nuxt-link>
      <nuxt-link :to="{name:'news-name',params:{name:'san'}}">动态命名路由-name</nuxt-link>

### 4.5：默认路由 ###

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>不匹配的路径</td> 
   <td>pages/_.vue</td> 
  </tr> 
 </tbody> 
</table>

*  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.2：自定义动画 ####

*  如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 `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'
    }

###  ###

[727f25029dc94d0dba561a12fbc15ab4.png]: https://img-blog.csdnimg.cn/727f25029dc94d0dba561a12fbc15ab4.png
[3aa78ea4cc0f49c3846305fa6956b831.png]: https://img-blog.csdnimg.cn/3aa78ea4cc0f49c3846305fa6956b831.png
[c811ae2c11144be2a4ab7d98405be575.png]: https://img-blog.csdnimg.cn/c811ae2c11144be2a4ab7d98405be575.png
[2d6f6485a9ad4b048ed332f6893b5bb8.png]: https://img-blog.csdnimg.cn/2d6f6485a9ad4b048ed332f6893b5bb8.png
[727f725ea1c24b3d8f1552e0f85afab0.png]: https://img-blog.csdnimg.cn/727f725ea1c24b3d8f1552e0f85afab0.png
[1569c8a447894b59b6196af4c4bf4266.png]: https://img-blog.csdnimg.cn/1569c8a447894b59b6196af4c4bf4266.png
[f21fe1ed516c47ebad3e460256774e4b.png]: https://img-blog.csdnimg.cn/f21fe1ed516c47ebad3e460256774e4b.png
[3c076f077d4845db9e237b9397939402.png]: https://img-blog.csdnimg.cn/3c076f077d4845db9e237b9397939402.png
[40d63ef416874898ba56e19fc0f78203.png]: https://img-blog.csdnimg.cn/40d63ef416874898ba56e19fc0f78203.png
[381d0ee5171c4f608a9b25be790b98dc.png]: https://img-blog.csdnimg.cn/381d0ee5171c4f608a9b25be790b98dc.png
[c6b987bf0c4d40c4b21b1078d135262d.png]: https://img-blog.csdnimg.cn/c6b987bf0c4d40c4b21b1078d135262d.png
[98e6d588a3ab4484ac68fd1d49693926.png]: https://img-blog.csdnimg.cn/98e6d588a3ab4484ac68fd1d49693926.png
[9382e3639ab24515b3f4851af6cf4811.png]: https://img-blog.csdnimg.cn/9382e3639ab24515b3f4851af6cf4811.png
[a29c421795f148fc805be8624a95f953.png]: https://img-blog.csdnimg.cn/a29c421795f148fc805be8624a95f953.png
[383d668ef07e41a2a25ac4a477e48d9b.png]: https://img-blog.csdnimg.cn/383d668ef07e41a2a25ac4a477e48d9b.png
[ce2e59f5564c4729b74c0951ffa4de51.png]: https://img-blog.csdnimg.cn/ce2e59f5564c4729b74c0951ffa4de51.png
[ab414b3aadf44c3095a9301612a33865.png]: https://img-blog.csdnimg.cn/ab414b3aadf44c3095a9301612a33865.png
[1d001ec972de43c3b6fad03bf7c816e3.png]: https://img-blog.csdnimg.cn/1d001ec972de43c3b6fad03bf7c816e3.png
[594fe615dc364048bf91698ad82b953c.png]: https://img-blog.csdnimg.cn/594fe615dc364048bf91698ad82b953c.png
[aa29b29286014623a9ca44c7f41da754.png]: https://img-blog.csdnimg.cn/aa29b29286014623a9ca44c7f41da754.png
[82c446c3cfcc4d2aa478e8e87c584b24.png]: https://img-blog.csdnimg.cn/82c446c3cfcc4d2aa478e8e87c584b24.png
[b1af22dd94c94807a820cda41e0f6f8c.png]: https://img-blog.csdnimg.cn/b1af22dd94c94807a820cda41e0f6f8c.png