偷偷学习NuxtJs（一）

本章初步了解NuxtJs及其基本情况和简单配置

NuxtJs官方文档

官方文档：v2.nuxt.com/docs/get-st…
中文文档：www.nuxtjs.cn/guide/insta…

对NuxtJs的理解

NuxtJs是基于VueJs的通用应用框架，采用SSR（服务端渲染），让SPA应用（VUE） 也可以拥有SEO。

NuxtJs是VueJs的通用框架，最常用的就是用来做SSR（服务端渲染）。
由于VueJs是用来开发SPA（单页面应用），随着技术的普及，很多人想用Vue开发多页面应用，并在服务端完成渲染，NuxtJs应运而生，它简化SSR的开发难度，可以直接用命令把vue项目生成为静态HTML。

NuxtJs是什么

NuxtJs是一个基于VueJs的通用应用框架。

• 通过对客户端/服务端基础架构的抽象组织，NuxtJs主要关注应用的UI渲染
• 可以基于它初始化新项目的基础代码结构，或者在已有的NodeJs项目中使用NuxtJs
• NuxtJs预设了利用VueJs开发服务端渲染的应用所需要的各种配置
• 官方提供了nuxt generate的命令，为基于VueJs的应用提供生成对应的静态站点功能
• 作为框架，NuxtJs为客户端/服务端这种典型的应用架构模式提供许多有用的特性，例如：异步数据加载、中间件支持、布局支持等

NuxtJs项目文件夹结构

NuxtJs生命周期

Nuxt生命周期分为客户端生命周期、服务端生命周期。

• 服务端的生命周期
  1. nuxtServerInit(store,context){}：类似于VueJs中的mainJs，可以在这个生命周期中获取token并存储；
  2. middleware({store,route,redirect,params,query,req,res})：类似于VueJs的路由守卫，可以是全局的、组件的，可以在这个生命周期中判断用户是否登录；
  3. validate({params,query}){return true}：用来校验url参数是否正确，主要在页面中使用；
  4. asyncData()：限于页面pages使用，components中不能使用，一般在这个函数中发送请求；
  5. fetch()：在页面(pages)、组件(components)都可以使用；
• 服务端和客户端公用的生命周期（el未渲染）
  1. beforeCreate()
  2. created()
• 客户端的生命周期
  1. beforeMount()
  2. mounted()

只有客户端的生命周期中有window对象，其它生命周期中引用window会报错：

<script>
export default {
  asyncData() {
    console.log(window) // 服务端报错
  },
  fetch() {
    console.log(window) // 服务端报错
  },
  created () {
    console.log(window) // undefined
  },
  mounted () {
    console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  }
}
</script>

NuxtJs自定义配置IP和端口

NuxtJs配置全局css

Nuxt + lib-flexible + postcss-pxtorem 实现rem适配

安装lib-flexible 和postcss-pxtorem

npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev