大前端学习-Vue服务端渲染Nuxt.js

最新推荐文章于 2023-07-21 14:31:47 发布

柠条_

最新推荐文章于 2023-07-21 14:31:47 发布

阅读量409

点赞数 1

分类专栏：大前端学习文章标签： vue.js typescript html5

本文链接：https://blog.csdn.net/sinat_35349493/article/details/107852568

版权

大前端学习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

内容输出来源拉勾教育大前端高薪训练营

一、Nuxt.js是什么

Nuxt.js 一个基于Vue.js生态的第三方开源服务端渲染应用框架
它可以帮我们轻松的使用Vue.js技术栈构建同构应用
官网
GitHub仓库

二、Nuxt.js的基本使用

可以初始项目
在已有的Node.js服务端项目
或者直接把Nuxt当作一个中间件集成到Node Web Server中

如果在现有的Vue.js项目上使用的话,我们需要非常熟悉Nuxt.js,除此之外呢,可能还需要至少10%的代码改动,会遇到坑。

所以从学习的角度上我们就先使用初始化项目,当然熟练之后,可以运用到各种环境上。

初始化NUxt.js应用的方式

官方文档
方式一: 使用create-nuxt-app
方式二: 手动创建

创建过程

mkdir nuxt-demo

npm init -y // 初始化 package.json

// npm install nuxt
// script 修改启动项
"script": {
  "dev": "nuxt"
}

在根目录下创建page文件和一个index.vue文件

----page
-----index.vue

npm run dev

访问3000端口即可看到Nuxt运行起来了

三、基本路由

Nuxt基本路由

要在页面之间使用路由，建议使用 <nuxt-link> 标签。

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

假设 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/router文件中nuxt已经自动帮我们懒加载好了路由

npm run dev

四、Nuxt 路由- 路由导航

a 标签会刷新整个页面,不要使用
nuxt-link 组件 nuxt-link
编程式导航

<template>
  <div>
    <h1>Hello Nuxt.js</h1>
    <a href="/">首页</a>
    <!-- router-link -->
    <router-link to="/">首页-router</router-link>
    <!-- 编程式导航-->
    <button @click="onClick">首页</button>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  methods: {
    onClick () {
      console.log('Hello')
      this.$router.push('/about')
    }
  }
}
</script>

<style>

</style>

五、动态路由

在urser目录下创建_id.vue

---page
---user
---_id.vue

获取路由参数

$router.params.id

六、嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个Vue文件，同时添加一个与该文件同名的目录用来存放子视图组件

Warning: 别忘了在父组件(.vue文件) 内增加用于显示子视图内容

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

Nuxt.js 自动生成的路由配置如下：

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

七、自定义路由配置

在根目录下新建 nuxt.config.js

module.exports = {
  router: {
    base: '/home',
    // routers: 一个数组,路由配置表
    // resolve: 解析路由组件路径
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/userInfo',
        name: 'userInfo',
        component: resolve(__dirname, 'pages/about.vue')
      })
    }
  }
}

八、nuxt 视图-模版

官网

Nuxt.js 视图-结构,一般由三部分组成
Doucument - HTML file 最外层的文档页面,也就是服务端渲染的那个页面
在HTML里面会包裹着 Layout 也就是页面的父路由
里面的页面组件和可选内容

// 根目录下创建app.html

// 默认的模版
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    <h1>app.html</h1>
    {{ APP }}
  </body>
</html>

执行npm run dev 即可看到效果啦

九、视图布局

在根目录下创建layouts/default.vue 这是默认的布局组件

// default.vue
<template>
  <div class="layout">
    <h1>layout/default.vue</h1>
    <nuxt />
  </div>
</template>

<script>
export default {
  name: 'LayoutDefault',
  layout: 'default'
}
</script>

<style>

</style>

执行npm run dev

十、指定默认组件

// layouts/foo.vue

export default {
  name: 'HomePage',
  layout: 'foo'
}

十一、asyncData异步数据

如何在服务端渲染动态页面

基本用法

它会将asyncData返回的数据融合组件data方法返回数据一并给组件
调用时机:服务端渲染期间和客户端路由更新之前

注意事项

只能在页面组件中使用
没有this,因为它是在组件初始化之前被调用的

异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据

import axios from 'axios'
export default {
  name: 'HomePage',
  async asyncData () {
    const res = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    return res.data
  },
  data () {
    return {
      name: '大白菜'
    }
  }
}

return 中的数据 会和data中的数据合并

非页面组件不会调用 asyncData

我们分别在page文件新建两个文件index.vue 以及foo.vue

// index.vue
<template>
  <div>
    <h1>Hello Nuxt.js</h1>
    <h1>{{posts[0].title}}</h1>
    <nuxt-link to="/about"></nuxt-link>
    <foo :posts="posts" />
  </div>
</template>

<script>
import axios from 'axios'
import Foo from '@/components/Foo'
export default {
  name: 'HomePage',
  components: {
    Foo
  },
  async asyncData () {
    const res = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    return res.data
  },
  data () {
    return {
      name: '大白菜'
    }
  }
}
</script>

<style>

</style>

// foo.vue
<template>
  <div>
    <h1>FooPage</h1>
    <ul>
      <li v-for="item in posts" :key="item.id">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FooPage',
  props: ['posts']
}
</script>

<style>

</style>

asyncData 没有 this

当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中发请求那数据
如果是非异步数据或者普通数据,则正常初始化到data中即可

十二、Nuxt.js异步数据- 上下文对象

asyncData中没有this,通过this.$router.params.id拿到的undefined,如果我们要获取点击跳转的路由怎么办呢,asyncData 有一个参数,就是是上下问对象asyncData(context)

// article/_id.vue
<template>
  <div>
    <h1>{{article.title}}</h1>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ArticlePage',
  async asyncData (context) {
    const  { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    const id = Number.parseInt(context.params.id)
    console.log(data, '44444')
    return {
      article: data.posts.find(item => item.id === id)
    }
  }
} 
// 传入一个上下文参数,这个时候我们可以通过context.params.id
// 或者通过context.route.params.id
</script>

<style>

</style>

// foo.vue
<template>
  <div>
    <h1>FooPage</h1>
    <ul>
      <li v-for="item in posts" :key="item.id">
        {{item.title}}
        <nuxt-link :to="'/article/' + item.id">{{item.title}}</nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'FooPage',
  props: ['posts']
}
</script>

<style>

</style>

参考

拉勾教育大前端高薪训练营
Nuxt.js官网

感谢

完整代码请点击在这里,并且每一小节,都对应着相应的分支

最后感谢您花宝贵的时间阅读本文, 有问题,欢迎在评论区留言，如果本文对你有帮助的话，就给本文点个赞吧,您的肯定是我前进的最大动力~🌹🌹🌹

柠条_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
大前端学习-Vue服务端渲染Nuxt.js

内容输出来源拉勾教育大前端高薪训练营一、Nuxt.js是什么Nuxt.js 一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网GitHub仓库二、Nuxt.js的基本使用可以初始项目在已有的Node.js服务端项目或者直接把Nuxt当作一个中间件集成到Node Web Server中如果在现有的Vue.js项目上使用的话,我们需要非常熟悉Nuxt.js,除此之外呢,可能还需要至少10%的代码改动,会遇到坑。.
复制链接

扫一扫