前端学习之nuxtjs

最新推荐文章于 2023-10-18 18:48:36 发布

Rich$kr

最新推荐文章于 2023-10-18 18:48:36 发布

阅读量280

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/dream_as_horse/article/details/109500090

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

两个异步任务没有关联关系，可以改为并行执行节省时间

Promise.all返回执行的所有异步任务结果组成的数组

dayjs一个轻量级的时间处理类库

markdown-it一个将普通文本转换为markdown的库

pm2一个可以后台管理node服务的库，不会占用命令行

路由

Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置

路由导航

a标签：会刷新整个页面，不要使用
nuxt-link组件：https://router.vuejs.org/zh/api/#router-link-props
编程式导航：https://router.vuejs.org/zh/guide/essentials/navigation.html

动态路由

以_为开头的文件会自动归为动态路由

嵌套路由

创建和父组件同名的文件夹，在该文件夹中创建的.vue文件会变成父组件的嵌套路由，在父组件中使用nuxt-child标签用于显示子视图内容
在这里插入图片描述

自定义路由配置

base
在nuxt.config.js中配置base来设置路由根路径
extendRoutes
用来扩展路由，使其它路由也能指向该文件

// routes：一个数组，路由配置表
// resolve：解析路由组件路径
extendRoutes (routes, resolve) {
	routes.push({
		path: '/hello',
		name: 'hello',
		component: resolve(__dirname, 'pages/about.vue')
	})
}

linkActiveClass
用来设置当前激活路由的样式为高亮，如果要精确匹配路由还需要在nuxt-link里加上exact属性

模板

在src文件夹下创建app.html文件来定制化Nuxt.js默认的html模板

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
    <head {{ HEAD_ATTRS }}>
        {{ HEAD }}
    </head>
    <body {{ BODY_ATTRS }}>
        <!-- 渲染的内容最终会注入到这里 -->
        <h1>app.html</h1>
        {{ APP }}
    </body>
</html>

布局

Nuxt.js允许扩展默认的布局，或在layouts目录下创建自定义的布局，别忘了在布局文件中添加<nuxt />组件用于显示页面的主体内容

在src目录下创建layouts文件夹，创建.vue文件作为自定义布局，其中default.vue是默认的布局
在组件中使用layout属性来指定当前组件的布局文件，不声明则使用default.vue作为摸人布局

异步数据-asyncData

基本用法
- 它会将asyncData返回的数据融合组件data方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前
注意事项
- 只能在页面组件中使用
- 没有this，因为它是在组件初始化之前被调用的

当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在asyncData中发请求拿数据

asyncData的参数可以拿到所有的属性和方法

身份验证（JWT）

js-cookie：客户端做数据持久化存储的插件
cookieparser：服务端解析cookie的插件

初始化客户端容器数据

  // nuxtServerInit是一个特殊的action方法
  // 这个action会在服务端渲染期间自动调用
  // 作用：初始化容器数据，传递数据给客户端使用
  nuxtServerInit ({ commit }, { req }) {
    let user = null

    // 如果请求头中有Cookie
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        user = JSON.parse(parsed.user)
      } catch (err) {

      }
    }
    commit('setUser', user)
  }

中间件

中间件允许定义一个自定义函数运行在一个页面或一组页面渲染之前

每一个中间件应放置在middleware目录，文件名的名称将成为中间件名称

一个中间件接受一个context作为参数

客户端和服务端的页面均可拦截

监听query参数改变

默认情况下query的改变不会调用asyncData方法，如果要监听这个行为可以设置页面组件的watchQuery属性监听参数

插件

在运行Vue.js应用程序之前可以执行js插件

注在Vue组件的生命周期内，只有beforeCreate和created这两个方法会在客户端和服务端被调用，其它生命周期函数仅在客户端被调用

使用方法：创建plugins文件夹，并在里面创建需要用到的插件，再在配置文件中注册
将axios作为插件使用可以在里面获取到上下文对象

HTML头部

在页面组件中使用head() {}来定制化页面特有的meta标签和title属性

head () {
   return {
     title: this.title,
     meta: [
       {
       	// 为meta标签配置唯一的标识号
         hid: 'description',
         name: 'description',
         content: 'description'
       }
     ]
   }
 }

Nuxt打包部署

在这里插入图片描述

传统部署方式

配置Host + Port（nuxt.config.js）
压缩发布包（.nuxt、static、nuxt.config.js、package.json、package-lock.json）
把发布包传到服务端
解压
安装依赖
启动服务

现代化部署方式

在这里插入图片描述

Rich$kr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之nuxtjs

路由Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置路由导航a标签：会刷新整个页面，不要使用nuxt-link组件：https://router.vuejs.org/zh/api/#router-link-props编程式导航：https://router.vuejs.org/zh/guide/essentials/navigation.html动态路由以_为开头的文件会自动归为动态路由...
复制链接

扫一扫