Nuxt详解+案例

最新推荐文章于 2024-09-18 15:38:24 发布
置顶 最新推荐文章于 2024-09-18 15:38:24 发布
阅读量1.6w 收藏 185
点赞数 30
分类专栏： Nuxt 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_wzz/article/details/121914443
版权

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支持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 不会增强该目录，及不支持SSR
layouts布局组件目录
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>
    <!-- 引用 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
/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>
<!--[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>

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布局

    <script>
export default {
  layout: 'blog'
  //...
}
</script>

    在这里插入图片描述

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模板代码

    <html>
<head>
	<meta charset="UTF-8" />
	<title>我是标题</title>
	<link rel="stylesheet" type="text/css" href="css外部文件"/>
	<script src="js外部文件" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</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>
M_wzz
关注
专栏目录
8.3.4 NuxtJS综合案例
w1fl1w的博客
09-24 676
本文为拉勾网大前端高薪训练营第一期笔记 心得体会 本章节花了很多时间看和学，主要是我对Vue.js和Nuxt.js并不是特别熟悉，之前写React.js比较多，这次真的是用一个非常实战的例子来学和实践，老师在视频里基本上只是把重点给做了，还有很多页面需要自己补全功能，经过这次作业有了一次全方位的理解，硕果累累，真的推荐学的人都自己实践一下。 实现的过程会遇到很多奇奇怪怪的问题，具体的问题和解决办法在本文最后，nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。 还有个意外收获就是因为这次作业是需要部署到
Nuxt综合案例实现
CrystalLee
03-31 410
前言 我们要实现的Demo[小伙伴可以自行点进去看看哈~] https://demo.realworld.io/#/ 以下是当前Demo的相关资源列举： GitHub 仓库 https://github.com/gothinkster/realworld 接口文档 https://github.com/gothinkster/realworld/tree/master/api 页面模板 https://github.com/gothinkster/realworld-starter-kit/blob/ma
vue、nuxt、uniapp实现全局路由拦截的方式和区别
最新发布
weixin_38468473的博客
09-18 305
vue、nuxt、uniapp的路由实现和拦截方式
Nuxt.js学习案例
W_ill的博客
10-29 227
demo:Realworld GitHub:https://github.com/gothinkster/realworld 模板文档： https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md 接口文档： https://github.com/gothinkster/realworld/tree/master/api 1 2 引用样式本土化，使用免费的CDN网站 引入组件头部和尾
举一个nuxt的例子
m0_57236802的博客
11-03 94
Nuxt.js 是一个基于 Vue.js 的通用应用框架，它为 Vue.js 应用程序提供了服务器端渲染(SSR)、静态站点生成(SSG) 和客户端渲染(CSR) 的能力。通过 Nuxt.js，开发者可以轻松创建服务端渲染的 Vue.js 应用程序，而不必进行大量的配置和设置。按照提示完成项目设置。在pages目录下创建一个名为在上述代码中，我们使用asyncData函数从服务器获取文章列表。该函数在服务器端执行，并将返回的数据合并到组件的数据中。现在，你应该能够在浏览器中访问。
NuxtJS综合案例
weixin_38550182的博客
04-07 1089
1、介绍 案例名称：RealWorld 一个开源的学习项目，目的就是帮助开发者快速学习新技能 GitHub仓库：https://github.com/gothinkster/realworld 在线示例：https://demo.realworld.io/#/ 接口文档：https://github.com/gothinkster/realworld/tree/master/api 页面模板：https://github.com/gothinkster/realworld-starter-kit/blob
【成神之路】Nuxt入门
weixin_47918681的博客
05-08 1622
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内容
毕业设计：基于 Nuxt.js + Tailwind.css + Python + MySQL 的个人博客系统。.zip
10-12
【标题解析】 "毕业设计：基于 Nuxt.js + Tailwind.css + Python + ...总结来说，这个毕业设计项目涵盖了前端开发、后端开发、数据库设计和管理、以及Web服务的实现，是全面了解 Web 开发流程和技术栈的良好实践案例。
视频教程-Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战-Vue
weixin_33392213的博客
05-28 1128
Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战 ...
详解nuxt sass全局变量(公共scss解决方案)
11-30
恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢 “包子”的帮助 注意 本案例 只是把你通用 的 比如  $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来...
nuxt 目录结构及配置文件详解
小青蛙的博客
07-31 6718
nuxt 目录结构详解 首先我们来看下使用 create-nuxt-app脚手架工具所创建的nuxt项目目录的结构， windows cmd 命令行输入，tree /f /a ，打印如下项目目录结构： C:. | .editorconfig | .gitignore | nuxt.config.js | package.json | README.md | +---assets...
Nuxt讲解
YX0711的博客
09-09 843
nuxt的完整讲解，包括内置组件、pages、生命周期、获取数据(对useFetch进行二次封装)、全局状态共享、element-plus使用
Nuxt.js入门安装及灵活使用
weixin_48143996的博客
12-14 3771
Nuxt.js1、 案例入门1.1、create-nuxt-app 介绍1.2、安装1.3 启动1.4、访问2、目录结构2.1、 目录1.2、别名3、路由3.1、路由概述3.2、基础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1 全局过渡动效设置3.7.2、 自定义动画4、视图4.1、默认模板4.2、默认布局4.2.1、 布局概述4.2.2、 布局分析4.2.3、 公共导航4.3、自定义布局4.4、错误页面4.5、Nuxt组件特殊配置4.5.1、 模板代码
NuxtJS实战案例
yuan
06-22 2059
NuxtJS 服务渲染的应用
Nuxt 项目教程
gitblog_01136的博客
08-28 280
Nuxt 项目教程 nuxt.newCreate a new Nuxt project from your address bar.项目地址:https://gitcode.com/gh_mirrors/nu/nuxt.new 1. 项目的目录结构及介绍 Nuxt 项目的目录结构如下： nuxt-project/ ├── components/ # Vue 组件 ├── pages/...
大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）
爱玲姐姐的博客
09-29 2850
NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署） 一、案例项目realworld介绍 1. 案例项目介绍 案例名称：RealWorld 这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。 GitHub仓库：https://github.com/gothinkster/realworld 在线实例：https://demo.realworld.io/ 2. 案例相关资源 页面模板：https://github.com/gothinkster/real
nuxt3+vuex
09-12
Nuxt.js是一个基于Vue.js的应用框架，而VuexVue.js的官方状态管理库。在Nuxt.js中使用Vuex可以帮助我们更好地管理应用的状态。在Nuxt.js 3中，使用Vuex也是相似的，你可以通过安装和配置Vuex来集成它到你的Nuxt.js 3项目中。 首先，你需要安装Vuex。在你的Nuxt.js 3项目根目录下运行以下命令： ``` npm install vuex ``` 然后，在你的项目中创建一个名为`store`的文件夹。在`store`文件夹下创建一个`index.js`文件作为Vuex的入口文件。 在`index.js`文件中，你需要导入Vue和Vuex，并创建一个新的Vuex Store实例。示例代码如下： ```javascript import { createStore } from 'vuex' const store = createStore({ state() { return { // 状态属性 } }, mutations: { // 修改状态属性的方法 }, actions: { // 异步操作和业务逻辑 }, getters: { // 计算属性 } }) export default store ``` 在`state`中定义你的状态属性，在`mutations`中定义修改状态属性的方法，在`actions`中处理异步操作和业务逻辑，在`getters`中定义计算属性。 最后，将创建的Vuex Store实例导出，并在Nuxt.js 3的配置文件（`nuxt.config.js`）中进行配置。示例配置代码如下： ```javascript export default { // ... plugins: [ '~/store' // 导入Vuex Store实例 ], // ... } ``` 通过以上步骤，你就可以在Nuxt.js 3项目中使用Vuex来管理应用状态了。通过在组件中使用`$store`访问和修改状态属性，以及调用`$store.dispatch`触发异步操作和业务逻辑。 希望这能解答你关于Nuxt.js 3和Vuex的问题。如果还有其他疑问，请随时提问！
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值