Nuxt.js是vue.js的通用框架，最常用的就是作ssr，一般的vue-cli不利于搜索引擎的seo操作，但是nuxt很好的解決了這一大問(wèn)題。

一、Nuxt的優(yōu)點(diǎn)：

1、基于Vue.js

2、自動(dòng)代碼分層

3、服務(wù)端渲染

4、強(qiáng)大的路由功能，支持異步數(shù)據(jù)

5、靜態(tài)文件服務(wù)

6、ES6/ES7 語(yǔ)法支持

7、打包和壓縮 JS 和 CSS

8、HTML頭部標(biāo)簽管理

9、本地開發(fā)支持熱加載

10、集成ESLint

11、支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等

二、Nuxt.js安裝：

1、npm install vue-cli-g（注：如果你已經(jīng)安裝過(guò)了，可以省略這步）

2、vue init nuxt/starter（注：初始化項(xiàng)目）

3、npm install（注：安裝依賴包）

4、npm run dev（注：?jiǎn)?dòng)項(xiàng)目）

三、Nuxt配置：nuxt.config.js文件；

1、頭部SEO索引：關(guān)鍵字、描述等配置：

 head: {
    title: "CRMEB PC端模板演示",
    meta: [
      { charset: "utf-8" },
      { name: "apple-mobile-web-app-capable", content: "yes" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "http-equiv",
        "http-equiv": "X-UA-Compatible",
        content: "IE=edge"
      },
      {
        hid: "keywords",
        name: "keywords",
        content:
          "CRMEB 新零售社交電商 社交電商系統(tǒng) 小程序商城系統(tǒng) 公眾號(hào)商城系統(tǒng) 商城系統(tǒng)源碼 免費(fèi)商城系統(tǒng) 商城系統(tǒng)開發(fā) 開源商城系統(tǒng) CRMEB源碼 微商城源碼 多店商城系統(tǒng) 小程序直播電商系統(tǒng) 知識(shí)付費(fèi)系統(tǒng)源碼 SCRM 客戶管理 客戶營(yíng)銷系統(tǒng) 多商戶商城 B2B2C B2C B2B O2O"
      },
      {
        hid: "description",
        name: "description",
        content:
          "CRMEB開源會(huì)員電商營(yíng)銷系統(tǒng)，依托社交營(yíng)銷應(yīng)用場(chǎng)景，獨(dú)創(chuàng)將用戶管理系統(tǒng)與社交電商系統(tǒng)創(chuàng)新性深度集成，充分將公域流量轉(zhuǎn)為私域流量，幫助企業(yè)快速積累用戶并實(shí)現(xiàn)精準(zhǔn)營(yíng)銷，一次購(gòu)買永久享受免費(fèi)升級(jí)服務(wù)免費(fèi)提供升級(jí)教程"
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: []
  },

2、中間插件：

例如：Swiper的引用

在項(xiàng)目plugins這個(gè)文件新建vue-swiper.js；

里面類容：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

在nuxt.config.js引用：

plugins: [
    { src: "~/plugins/vue-swiper.js", ssr: false }
  ]
  
css: [
    { src: "swiper/dist/css/swiper.css" }
  ]

3、在nuxt.js中跳轉(zhuǎn)可以使用：

<nuxt-link to="/" class="goIndex">繼續(xù)逛</nuxt-link>

4、ansycData的使用方法：

async asyncData({app,query}){
      return{
        headerTitle:parseInt(query.type)
      }
    },

5、Vuex的使用：

export const state = () => ({
  headers: true,
  footers: true
})

export const mutations = {
  isHeader (state, data) {
    state.headers = data;
  },
  isFooter (state, data) {
    state.footers = data;
  }
}

export const actions = {
  nuxtServerInit({commit}, {app}) {
    commit('titles', app.$cookies.get('titles'));
  }
}