初识Nuxt

什么是Nuxt？

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

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

为什么要学习Nuxt？

解决问题：vue-cli存在的一些问题

SEO：搜索引擎优化

• 多页面应用
• title，内容，关键字
• 网站内容的爬取

解决方法一：预渲染

A>解决多页面应用：

1.下载插件 prerender-spa-plugin

npm install prerender-spa-plugin -S

2.vue.config.js进行配置

module.exports={
    configureWebpack:{
      plugins:[
        new PrerenderSPAPlugin({
          staticDir:path.join(_dirname,'dist'),
          //配置路由的页面
          routes:[
            '/',
            '/about',
            '/contact',
          ]
        })
      ]
    }
  }

B>解决title、关键字

1.下载 meta-info

npm install vue-meta-info -S

2.main.js引入

import metaInfo from ‘vue-meta-info’

app.use(metaInfo)

3.页面配置

<template>
    <div>

    </div>
</template>

<script >
export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [   // set meta
        {                
            name: 'keyWords',
            content: 'My Example App'
        },
        {
            name: 'description',
            content: '这是一段网页的描述'
         }
      ]
      link: [{                 // set link
            rel: 'asstes',
            href: 'https://assets-cdn.github.com/'
      }]
    }
  }


</script>

<style scoped>

</style>

解决的问题：

• 打包多个页面
• 每个页面单独生成title描述关键字【vue-meta-info】
• 接口数据是在html生成之前就放在页面上的，爬虫可以抓取到内容

预渲染存在的问题：

• 预渲染无法配置动态路由
• title描述关键字词来自于接口数据，配置到meta-info也是不行的

适合做什么项目：一个项目可能某几个页面需要SEO

---

解决方法二：服务端渲染（SSR渲染，采用Nuxt框架技术）

过程（请求两个服务端）：Nuxt将服务器返回的数据渲染好html后再返回给浏览器