Vue 的 服务端渲染 nuxt 初尝试

官网下载模板操作

npx create-nuxt-app <项目名>

项目名不带默认下载到当前目录
后面一堆选项，根据自己的需求选择。
下载完后，提示：

 To get started:

        npm run dev

  To build & start for production:

        npm run build
        npm run start

npm run dev 直接启动，打开链接。

Nuxt自动生产了项目目录，下面是大致作用。

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

1.配置全局CSS

在 /assets/css/ 创建normailze.css
然后再/nuxt.config.js 添加

css:['~assets/css/normailze.css'],

就可以全局生效了。

2. 配置错误页面

你可以通过编辑 layouts/error.vue 文件来定制化错误页面.

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>

3. 自定义Loading页面

nuxt.config.js

module.exports = {
  loading: '~components/loading.vue'
}

4. 校验参数

如果校验失败，则自动跳转到错误页面

<script>
export default {
  validate({ params, query }) {
    return /^d+$/.test(params.id) // must be number
  }
}
</script>

5.用nuxt最重要的一个功能！！！服务端渲染异步数据。

如果你想要在服务器端获取并渲染数据，那么Nuxt.js的asyncData方法可以达到这个效果，它使得你能够在渲染组件之前异步获取数据。
asyncData方法会在组件（限于页面组件）每次加载之前被调用。
它可以在服务端或路由更新之前被调用。
asyncData方法在组件渲染之前执行了，组件还没有渲染，没有this。

 export default {
    data () {
      // 直接写的数据
      return {
         dd: '66'
      }
    },
    //提供第一个参数context，表示上下文（nuxt所有功能）	
    asyncData(context) {
        //发送ajax
        let 数据 = context.$axios.get('xx','xx')
        // 将数据组合并返回，会被加到data
        return {
            名称: 数据
        }
    }
 }

6.并发多个请求操作

async asyncData({store, params}) {
  let [result1, result2] = await Promise.all([
    axios.post('/api/api1'),
    axios.post('/api/pai2')
  ])
  // something code.... (处理返回结果)
  return{
    result1: result1.data,
    result2: result2.data
  }
}

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

export default {
	fetch(context) {
		//发送ajax
		let 数据 = context.$axios.get('xx','xx')
		//加入store
		context.store,commit('xxx', 数据)
	}
}