nuxt.js 安装，使用

一、创建项目，并运行
终端运行 npx create-nuxt-app <项目名> （npx（npx在NPM版本5.2.0默认安装了）），填写完项目信息后进入项目目录运行 npm run dev即可
二、目录介绍

具体参考官方文档目录部分介绍 https://www.nuxtjs.cn/guide/directory-structure#%E7%9B%AE%E5%BD%95

三、各个目录的使用方法
1、assects 目录 和 static 目录。
在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。
2、components 目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
在components 目录下新建nav.js

在需要使用的地方引入即可

3、layouts 目录
在layouts 目录下新建home.vue文件

在需要不同布局的页面里写上如下代码

注意：布局没有指定的话，都是使用default.vue这个布局的

4、middleware 目录

参考 https://www.nuxtjs.cn/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6

5、pages 目录
假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由和其他详细内容参考 https://www.nuxtjs.cn/guide/routing

6、plugins 目录
使用第三方模块
首先我们需要安装 npm 包：

npm install --save axios

然后，在页面内这样使用：

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

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

使用 Vue 插件
假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。
首先增加文件 plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

然后, 在 nuxt.config.js 内配置 plugins 如下：

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

具体参考 https://www.nuxtjs.cn/api/configuration-plugins

7、store 目录
普通写法：
使用普通方式的状态树，需要添加 store/index.js 文件，并对外暴露一个 Vuex.Store 实例：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = () => new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state， payload) {
            state.count = state.count + payload
        }
    },
    actions: {
        add({commit}, payload) {
            commit('add', payload)
        }	
    }
})

export default store

使用的时候就跟普通的vue 中vuex的用法一样 this.$store.dispatch(‘add’, 123)

分模块写法：如下图展示

使用的时候 this.$store.dispatch(‘nav/updActiveIndex’, 3)

8、页面切换的过度动画
全局过度动画效果设置
在全局样式文件 assets/main.css 里添加一下样式：

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}

然后添加到 nuxt.config.js 文件中：

module.exports = {
  css: [
    'assets/main.css'
  ]
}

单独给某个页面设置过度动画
在全局样式 assets/main.css 中添加一下内容：

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可：

export default {
  transition: 'test'
}

9、设置head
设置全局的head
在nuxt.config.js中

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

单独给某个页面设置head，在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。

<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>

具体参考 https://zh.nuxtjs.org/api/pages-head/

10、配置IP和端口
在根目录下的 package.json 里对 config 项进行配置

 "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

11、页面内常用的钩子函数

      asyncData({app, query, params}) {
      // app Vue的根实例
      // query 是路由传值 ?a=1&b=2
      // params 是路由动态传值 :id
      // 具体参考  https://zh.nuxtjs.org/api/context
        console.log(window) // 服务端报错
      },
      fetch() {    
        console.log(window) // 服务端报错
      },
      created () {
        console.log(window) // undefined
      },
      mounted () {
        console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
      }

12、asyncData 的使用

 export default {
    data () {
      return {
        list: []
	  }
    },
    async asyncData ({ query }) {
      console.log('query', query)
      // .....这边用axios请求数据 记得异步await请求
      let list = res.data
      // return { list: list } 相当于下面那行
      return { list }
    }
  }