Nuxt入门学习

Nuxt.js是vue.js的通用框架，最常用的就是作ssr，一般的vue-cli不利于搜索引擎的seo操作，但是nuxt很好的解决了这一大问题。

一、Nuxt的优点：

1、基于Vue.js

2、自动代码分层

3、服务端渲染

4、强大的路由功能，支持异步数据

5、静态文件服务

6、ES6/ES7 语法支持

7、打包和压缩 JS 和 CSS

8、HTML头部标签管理

9、本地开发支持热加载

10、集成ESLint

11、支持各种样式预处理器： SASS、LESS、 Stylus等等

二、Nuxt.js安装：

1、npm install vue-cli-g（注：如果你已经安装过了，可以省略这步）

2、vue init nuxt/starter（注：初始化项目）

3、npm install（注：安装依赖包）

4、npm run dev（注：启动项目）

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

1、头部SEO索引：关键字、描述等配置：

 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 新零售社交电商 社交电商系统 小程序商城系统 公众号商城系统 商城系统源码 免费商城系统 商城系统开发 开源商城系统 CRMEB源码 微商城源码 多店商城系统 小程序直播电商系统 知识付费系统源码 SCRM 客户管理 客户营销系统 多商户商城 B2B2C B2C B2B O2O"
      },
      {
        hid: "description",
        name: "description",
        content:
          "CRMEB开源会员电商营销系统，依托社交营销应用场景，独创将用户管理系统与社交电商系统创新性深度集成，充分将公域流量转为私域流量，帮助企业快速积累用户并实现精准营销，一次购买永久享受免费升级服务免费提供升级教程"
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: []
  },

2、中间插件：

例如：Swiper的引用

在项目plugins这个文件新建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中跳转可以使用：

<nuxt-link to="/" class="goIndex">继续逛</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'));
  }
}