首页 > 其他分享 >nuxt使用介绍[学习记录]

nuxt使用介绍[学习记录]

时间:2024-04-11 21:22:27浏览次数:23  
标签:index vue 记录 js 学习 user pages 路由 nuxt

服务端渲染

传统服务端渲染

  • image.png

单页面应用 SPA

image.png

nuxt 是什么

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

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

  • 就使用而言,组件写法基本和vue相差不大,区别在于几个钩子函数,以及一些服务端渲染相关的东西

nuxt特性

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES2015+ 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML 头部标签管理
  • 支持各种样式预处理器: SASS、LESS、 Stylus 等等

优点

  • 利于seo,一般购物类网站都需要seo优化
  • 首屏渲染速度更快
    • 原因是:服务端渲染只需要进行一次网络请求,而客户端渲染需要先请求运行所需文件,运行之后再进行网络请求数据,然后加载页面

缺点

  • 对于服务器要求比客户端渲染高

使用介绍

1.目录结构介绍

image.png

  • assets
    主要用于组织未编译的静态资源如LessSASS.....
  • components
    主要用来存放组件,且其不能使用asyncData函数
  • layouts 布局目录
    用于进行页面布局,例如公共导航栏,footer布局
  • plugins
    存放一些插件配置,只会执行一次,比如axios的拦截器添加token
  • middleware
    中间件,可以进行一些,权限验证之类的,全局的中间件,每次进入不同的路由都会执行
  • pages 页面目录
    nuxt采用约定式路由,不需要配置,文件路径名即为路由地址
    例如
    页面地址
--| user/
-----| index.vue
-----| one.vue
--| index.vue

对应路由地址为

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
  • static 静态文件目录
    此目录下的文件不会被编译打包,服务器启动后会直接将其映射至根目录
    例如static/story.txt => /story.txt
  • store
    vuex相关配置
  • nuxt.config.js
    关于项目的一些配置,例如插件,中间件,路由,seo优化标签等
    image.png

2.路由(约定式:按照约定方式使用,不需要使用者额外配置)

  • 基础路由
    假设 pages 的目录结构如下:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么,Nuxt.js 自动生成的路由配置如下:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
  • 动态路由
    在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

你会发现名称为 users-id 的路由路径带有 :id? 参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在 users/_id 目录内创建一个 index.vue 文件。

  • 路由参数校验
    Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子: pages/users/_id.vue

export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error , Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面
类似于vue路由导航功能

3. 布局

  • 默认布局
    可通过添加layouts/default.vue文件来扩展应用的默认布局。

提示: 别忘了在布局文件中添加 组件用于显示页面的主体内容。

默认布局的源码如下:

<template>
  <nuxt />
</template>
  • 自定义布局
    layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局:

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>
  • 错误处理
    你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
    这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误(404,500 等)的组件。
<template>
  <div class="container">
    <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>

4.钩子函数

image.png

  • asyncData
    • 返回的数据会合并在data中
    • 只能在pages下调用
    • 该方法在组件实例化之前调用,无法通过this访问组件实例
export default {
  async asyncData({ params }) {
    const { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
  • fetch
    • fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
<script>
  export default {
    async fetch({ store, params }) {
      await store.dispatch('GET_STARS')
    }
  }
</script>
  • create
    • 会在服务端执行,如果不是服务端渲染,数据请求最好放在beforeMount及之后的钩子中
  • beforeMount/mounted/updated/beforeDestroyed/destroyed
    • 其余钩子跟vue类似

image.png

项目中使用到的一些技术

nuxt相关

1.全局混入/局部混入/全局注册组件

可以用于弹窗/加载态....

2. inject 插件注入

注入

export default function (ctx, inject) {
const login = () => {}
  inject(login)

使用

this.$login()

诸如一些登录,退出或者一些api请求方法可以使用此方法注入,更加简洁优雅,或者嵌套组件使用方便数据传递
此配置需要在nuxt.config.js 配置

3. nuxtServerInit

store/index.js

export const actions = {
  async nuxtServerInit({ dispatch }, ctx) {
    // 一些状态初始化或者token设置
  }
};

第三方插件等

1. sa-sdk-javascript

神策分析,是针对企业级客户推出的深度用户行为分析产品,支持私有化部署,客户端、服务器、业务数据、第三方数据的全端采集和建模,驱动营销渠道效果评估、用户精细化运营改进、产品功能及用户体验优化、老板看板辅助管理决策、产品个性化推荐改造、用户标签体系构建等应用场景。作为 PaaS 平台支持二次开发,可通过 BI、大数据平台、CRM、ERP 等内部 IT 系统,构建用户数据体系,让用户行为数据发挥深远的价值。
简而言之,就是对用户行为进行数据分析

用于cookie 的设置

3.tailwindcss

css框架

  • 提供了简洁的class类名语法
  • 响应式布局.........等
    image.png
    image.png
4.isMobile

判断当前环境是否为移动端

5.文本提示toolTip

image.png

部署

  • 发布部署
    • 先编译再启动服务,生成文件在./nuxt/dist
npm run build
npm start

+静态应用部署

  • 需要渲染以及接口都可用,生成文件在根目录下dist
  • 所有生成的页面都是静态的,适用于博客等
npm run generate

seo相关

image.png

标签:index,vue,记录,js,学习,user,pages,路由,nuxt
From: https://www.cnblogs.com/coderzdz/p/18130053

相关文章

  • 如何在 Pytest 中添加日志记录
    前言在编写和运行测试时,对于调试和排查问题,添加日志记录是一种非常有用的技术。Pytest是一个流行的Python测试框架,开发者通过pytest可以轻松地编写和运行各种测试。本文将介绍如何在Pytest中添加日志记录,以便更好地理解测试执行过程中的细节和问题。pytest.ini我们之前有......
  • Unity机器学习ML-Agents-release_21环境安装
    https://zhuanlan.zhihu.com/p/678870771 pipconfigsetglobal.index-url https://pypi.tuna.tsinghua.edu.cn/simple(启用清华源下载)python-mpipinstallmlagents==1.0.0--no-dependenciespipinstallattrpipinstallcattrs==1.1.0pipinstallpyyamlpipinstall......
  • 深度 学习
    深度学习入门数据是学习的核心引入:深度学习是机器学习的一个子领域,而机器学习的研究目标是让人工智能具备学习的能力。深度学习,机器学习,人工智能字里行间透漏着理性和高大尚的味道。(对于这种看着高大尚感觉距离现实很远的东西一般下一句都是“其实就在身边”吧)其实,图像识别(人脸......
  • JAVA语言学习-Day8
    参考教学视频:秦疆GUI组件:窗口、弹框、面板、文本框、列表框、按钮、图片、监听事件、鼠标、键盘事件、破解工具1.简介Gui的核心:SwingAWT界面不美观需要jre环境2.AWTawt介绍:包含了很多的接口和类元素:窗口、按钮、文本框java.awt.*组件Componentbu......
  • 域名之A记录,CNAME,NS联系和区别
    域名解析中常常涉及:A记录,CNAME,NS1.A记录又称IP指向,用户可以在此设置子域名并指向到自己的目标主机地址上,从而实现通过域名找到服务器。说明:指向的目标主机地址类型只能使用IP地址;2.CNAME通常称别名指向,您可以为一个主机设置别名。比如设置test.mydomain.com,用来指向一个......
  • 记录真实项目中遇到的bug--007:排序展示bug
    T07:排序展示bug:1.优先级:T22.前提条件:用户A打开日历3.预期结果:日历行程展示按照业务提供的sort顺序进行排序。4.实际结果:日历行程展示的时间段在9点之前的顺序不符合预期。5.缺陷跟踪:后端按照sort字段排序,更改为9点之前的时间段前面加0,例如原先的9:45,改为09:45,后达到预期......
  • 宋红康JDBC课程学习记录2
    宋红康JDBC课程学习记录2第3章:使用PreparedStatement实现CRUD操作3.1操作和访问数据库数据库连接被用于向数据库服务器发送命令和SQL语句,并接受数据库服务器返回的结果。其实一个数据库连接就是一个Socket连接。在java.sql包中有3个接口分别定义了对数据库的调用的......
  • 2024.04.11NOIP模拟赛 #1 记录
    2024.04.11NOIP模拟赛#1记录AT_arc160_e[ARC160E]MakeBiconnected给你一棵\(n\)个节点由无向边组成的二叉树,树上每个点有权值\(w_i\)。你可以把两个点之间连无向边,如果将\(u\)与\(v\)连边,代价是\(w_u+w_v\)。请给出一种连边方式,使得连边后,图中去掉任何一个点仍然......
  • maven学习
    maven学习主要介绍一下在学习maven中所踩的坑,首先当时看的是黑马的视频,但是都是19年的了,再配置pom.xml的时候都没有配置jdk,而且有些东西也已经过时了,所以推荐在学习的时候先去查找最近的资料来方便学习【尚硅谷新版Maven教程(高效入门maven,上手又快又稳)】https://www.bilibili.co......
  • 苍穹外卖学习笔记——第四天
    套餐管理新增套餐需求分析和设计产品原型新增套餐添加菜品窗口业务规则套餐名称唯一。套餐必须属于某个分类。套餐必须包含菜品。名称、分类、价格、图片为必填项。添加菜品窗口需要根据分类类型来展示菜品。新增的套餐默认为停售状态。接口设计根据类型查询分......