Nuxt与Vue的区别

在使用Nuxt之前，需要了解vue ssr（服务端渲染）基础

什么是SSR

Server Side Rendering(服务端渲染)

以前浏览器获取数据都是后端渲染，就是浏览器请求后，后端通过处理渲染最终的.html文件给浏览器。随着js和ajax的兴起，前端渲染增多。Node的出现，可以将渲染工作放在node服务端，服务端直接将html字符串返回给浏览器。
服务端的渲染主要有利于SEO和首屏渲染快两大好处。

SSR的优点

• 更好的 SEO
• 更快的内容到达时间

SSR方案的权衡之处

• 开发条件所限
• 涉及构建设置和部署的更多要求
• 更多的服务器端负载

生命周期对比

vue的生命周期：

nuxt的生命周期应用一个完整的服务器请求到渲染（或用户通过 切换路由渲染页面）的流程：

区别

No.1-->路由

Nuxt 按照 pages 文件夹的目录结构自动生成路由而 Vue 则需要在 router 下手动配置路由（除非自己配置一个自动生成路由的插件或第三方库）

No.2-->入口页面 

Nuxt页面入口为 layouts/default.vue而vue页面入口为 src/App.vue

No.3-->标签

<nuxt-link></nuxt-link>

<router-view></router-view>

 Nuxt中有一些标签和写法与Vue中的有一丝丝的不同，但是原理都是一样的

No.4-->head中的mate标签

vue中需要引入一个vue-mate的插件

$ npm install vue-meta --save

 

然后再router.js中引入即可，就可以在全局使用了

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'

Vue.use(Router)
Vue.use(Meta)

export default new Router({
  //...
})

全局使用方法：在任何一个component中都可以定义 metaInfo 属性

 export default {
    name: 'App',
    metaInfo: {
      // 如果子component中没有定义 metaInfo.title ，会默认使用这个title
      title: '首页',
      titleTemplate: '%s | 我的Vuejs网站'
    }
  }

Nuxt中只需要加入head属性即可

# 商业转载请联系作者获得授权，非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author)：十年後の八月
# 链接(URL)：https://catbk.cn/nuxt-js-customize-the-meta.html
# 来源(Source)：十年後の八月

export default {
  ...
 
  head() {
    return {
      title: this.$t('home.title'),
      meta: [
        { hid: 'description', name: 'description', content: this.$t('home.description') },
        { hid: 'og:site_name', property: 'og:site_name', content: 'hstream.io' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:title', property: 'og:title', content: this.$t('home.title') },
        { hid: 'og:description', property: 'og:description', content: this.$t('home.description') },
        { hid: 'og:url', property: 'og:url', content: 'https://xxxx.com' + this.$route.path },
        {
          hid: 'og:image',
          property: 'og:image',
          content: '/images/logo.png',
        },
      ],
    }
  },
}

No.5-->webpack配置 

Nuxt内置Webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置 vue关于webpack的配置存放在build文件夹下

 

--------------------------------------------结束----------------------------------------

谢谢大家，如需发现问题请大家积极提出联系我，vx:Grl_long