nuxt.js核心讲解，看完即可上手真实项目

首先按照文档创建好项目 我一般喜欢选择安装vantui这个UI，不得不说这个UI库真的太好用了。

直接说重点，项目中最常用的
1. 关于css 的引用，
比如我们使用animate.css这是一个特别好的动画css.
根据自己的爱好，我一般喜欢在跟目录建立assets文件夹 里面建立一个css 如下

然后直接在nuxt.config.js的css中引用

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'vant/lib/index.css',
    '@/assets/css/animate.min.css',
  ],

这样我们就完成了公用的css使用

使用方式
在任意组建中 例如

  <h1 class="animated fadeInDown">
        Welcome to the Vant + Nuxt.js template
  </h1>

animated 必须的 后面 fadeInDown动画效果 可以根据官方文档使用自己喜欢的动画

2.在nuxt中使用axios
这里有几种方式 举一种来说

1. 安装依赖npm i @nuxtjs/axios -s
2. 在nuxt.config.js中配置axios

modules: [
      '@nuxtjs/axios',
  ],

此时其实我们就可以在组建中来使用了 asyncData 上下文中就有$axios , 其中提供了很多方法$get $post $put 可以自己打印出来看一下
3.对网络请求拦截进行封装
在plugins下建立一个js 名字随意 axios.js

将axios.js添加到nuxt.config.js中，全局使用上面配置

 plugins: [
      '~/plugins/axios',
  ],

>  axios.js 如下

export default function ({ $axios,redirect}) {
	$axios.defaults.baseURL = '';
	$axios.defaults.timeout = 5000;
    $axios.interceptors.request.use(
        config => {
         console.log("拦截后")
          return config
        },
        error => {
        
          return Promise.reject(error)
        }
      )

	$axios.interceptors.response.use(response => {
        console.log("拦截后")
		return response;
	}, err => {
		const errRes = err.response
		//根据自己的逻辑判断
		if ((errRes.data.code == 2008 || errRes.data.code == 400)) {
			return Promise.resolve(err)
		} else {
			return Promise.reject(err)
		}
	})
}

此时我们发送的所以请求就能被正常拦截到

3.vuex的使用
首先我们看文档

Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

引用 vuex 模块 将 vuex 模块 加到 vendors 构建配置中去 设置 Vue 根实例的 store 配置项 Nuxt.js
支持两种使用 store 的方式，你可以择一使用：

模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）
Classic(不建议使用)： store/index.js返回创建 Vuex.Store 实例的方法。
无论使用那种模式，您的state的值应该始终是function，为了避免返回引用类型，会导致多个实例相互影响。

说白了也就是在store目录下直接建立js文件， 框架自动帮你转移成传统的那种形式，我们只要导出即可（个人了解可能不到位）
几个例子说明 TEST.js为例

TEST.js

export const state = () => ({
    age:0
  })
  export const mutations = {
    CHANGE_AGE(state,val){
        state.age = val;
    },
    SET_AGE(state,val){
        state.age = val;
    }  
  }
  export const actions = {
       anCAge({ commit },data) {
        commit('SET_AGE',data)
      }
  };
  
  

我们定义一个age字段默认值为0

需求当在 asyncData 阶段 需要帮age修改成25

直接在组建中修改

   asyncData({ query, $axios,store }) {
             //在 asyncData中来修改store中的值
             store.commit('TEST/CHANGE_AGE', 25)
    },

从这理不难看出我们不需要像vue 项目那样，将vuex按照模块拆分，在nuxt.js中直接建立需要的js即可

commit 是直接修改值，我们也可以使用 `dispatch` 的方式来修改

组建中假如有个button 这里使用的vant ui

  <van-button type="info" @click="changefn1">修改vuex数据</van-button>

在组建的 methods中

    methods: {
          changefn1(){
                this.$store.dispatch('TEST/anCAge',30)
          },

      },

这里有个小细节，可能眨眼一看没有看懂

   asyncData({ query, $axios,store })  为什么一些地方写的是    asyncData(context)   

不难看出其实context 上下文是一个对象，里面包含着vue 的很多实例。换句话来说，用{}的形式也就是帮context结构出来（es6的方式）
context中的实例

4.数据的服务端渲染
说白了就是将数据 在asyncData 赋值 return出去
几个例子 我们需要渲染一个列表 ，查看源代码我们是能看到列表标签文字的，则就是服务端渲染，（用以前的接口测似）
在index.vue组建中

watchQuery  监听路由参数变化

<template>
  <div class="container">
    <div>

    
      <ul>
        <li v-for="(item,index) in list" :key="index">
          {{index}}  {{item.title}}
        </li>
      </ul>
    </div>

   <van-button type="info" @click="changePage(2)">第二页</van-button>

  </div>
</template>

export default {
   name: 'IndexPage',
   watchQuery: true, 
    async asyncData({ query, $axios,store }) {
       try {
             let  {pageNo} = query;
            const res= await $axios.$get(`/article/articlePage?siteId=20&siteCode=20&moduleId=36&moduleCode=32-36&pageSize=5&pageNo=${pageNo||1}`)
            return {list: res.data}
       } catch (error) {
         
       }
    },

      methods: {
          changePage(e){
                this.$router.push({path:'/',query:{pageNo:e}})  
          },
       
      },
      created:function(){
      
      }
 
}
</script>

在 asyncData 中return出去的东西，其实就相当于以前data里面的东西，我们在模板上直接使用
从上面的请求中我们看出 我们点击跳转第二页 直接调用 methods 中的 changePage 方法，路由参数一变化，页面重新加载依次，又加载了asyncData声明周期 query 中的 分页参数pageNo:e变成2

默认的时候我们是写了一个默认值1 ${pageNo||1} 有值就是对应的值，没有就是1

只需要弄懂asyncData 这个东西，其他的跟vue都一样

5.其他砸项目

列举几个

1.  $nuxt     当用户互联网连接变为离线时触发

使用方式

layouts/default.vue:

<template>
  <div>
    <div v-if="$nuxt.isOffline">网络一断开</div>
    <nuxt />
  </div>
</template>

2.组建的使用，在nuxt中组建我们不需要引用

在components 下面建立一个NuxtLogo.vue组建

使用

index.vue中   直接使用          <NuxtLogo />

3.head 每个页面都可以设置单独的 head

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>

其他就不一一列举，用到自己看看文档