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