nuxt

想要学习nuxt.js，首先要弄清楚客户端渲染和服务端渲染这两个概念。

一、客户端渲染 VS 服务端渲染

1. 客户端渲染

简单理解就是，在服务端放一个html 页面，客户端发起请求时，服务端把页面（响应的是字符串）发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图：

客户端渲染.png

但是，这种渲染方式存在的弊端也日益显露出来，比如首屏渲染慢，不利于seo等问题。想对应的，服务端渲染恰好弥补了这些不足。

2. 服务端渲染：

也称SSR，即server side render的缩写。在服务端渲染出完整的首屏dom结构，直接发送到浏览器；前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。如图：

image.png

服务端渲染有两大优点：

一是更利于SEO。因为爬虫只会爬取源码，不会执行脚本。使用了MVVM框架之后，页面的大多数DOM元素是在客户端根据js动态生成的，可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回的是已经获取了异步数据并执行JavaScript脚本的最终HTML，爬虫就可以抓取完整的页面信息。
二是更利于首屏渲染。对服务端渲染而言，首屏渲染是node发送过来的html字符串，不依赖于js文件，这样用户就能更快地看到页面内容。尤其是大型单页应用，资源请求量大，造成首屏渲染加载缓慢，使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。
Nuxt.js作为Vue.js的通用框架，就常被用来作SSR。

二、nuxt.js

nuxt是一个专注于ui渲染的应用框架，可以快速搭建项目，还提供了服务端渲染的功能。

1. 安装

直接用vue-cli安装
vue init nuxt-community/starter-template

2. nuxt推荐的项目结构

assets——资源文件
components——组件
layouts——布局，默认default。所有页面都会加载在布局页面中的标签中。如果要在普通页面中使用下级路由，则要在页面中添加
middleware——中间件：每个页面加载前调用，在页面中调用的方法是middleware: 'middlewareName'。
node_modules——依赖包
nuxt.config.js——个性化配置
package.json——
pages——页面。根页面是index.vue，二级页面只要添加文件夹。动态路由页面的名称格式是：_变量.vue
plugins——插件
static——静态文件（不需要webpack打包的）。
store——状态管理
yarn.lock

3. 生命周期

Nuxt在vue的基础上对生命周期做了扩展：

export defualt {
  middleware(){ }, // 服务端
  validate(){ },  // 服务端
  asyncData(){ },  // 服务端
  fetch(){ },  // store数据加载
  beforeCreate(){ },  // 服务端和客户端都会执行
  created(){ },  //  服务端和客户端都会执行
  beforeMount(){ }, // 
  mounted(){ } // 客户端
}

4. asyncData(context)

如果需要服务端渲染，首次渲染时一定要使用这个方法。它可以在渲染组件前异步获取数据。asyncData传入context参数，可以获取一些信息，如：

export default {
  asyncData(ctx){
    ctx.app   // 根实例
    ctx.route   // 路由实例
    ctx.params   // 路由参数
    ctx.query   // 路由问号后的参数
    ctx.error   // 错误处理方法
  }
}

使用这个方法时要注意，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法。我们可以这样做：

async asyncData(ctx){
  try {
    throw new Error()
  } catch {
    ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码
  }
}

此时，错误页可以通过/layout/error.vue自定义。
注意：该方法在服务端执行，返回的数据与data()返回的数据合并。该方法在组件初始化前被调用，所以不能通过this引用实例对象。

5. head()

用于更新头部信息title/descripe等，可以通过this获取组件数据。

6. middleware()

在特定页面实战中间件使用axios请求数据：
（1）nuxt项目默认安装axios，所以只要安装proxy即可

npm install @nuxtjs/proxy

（2）在nuxt.config.js中加上：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    './api': {
      target: 'http://www.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

（3）页面中使用

import axios from 'axios'
export default {
    data () {
        return {
          page: 0
        }
    },
    async asyncData () {
        let data = await axios.get('http://localhost:3000/api/admin/list')
        return {
          page: data.data.page
        }
  },
}

采用 import axios from 'axios' 方式引入axios时，接口参数前须加baseURL。

5. 使用scss

（1）安装sass

npm i node-sass sass-loader scss-loader --save-dev

（2）如果要全局使用某个scss文件，要借助sass-resources-loader，还需要在nuxt.config.js的build配置中调整导出的loader配置：

export default {
  build: {
    extend(config, { isDev, isClient }){
      const sassResourcesLoader = {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            // 填写需要全局注入scss的文件
            'assets/styles/mixins.scss'
          ]
        }
      }
      // 修改 scss sass 引用的 loader。
      config.module.rules.forEach((rule) => {  
        if (rule.test.toString() === '/\\.vue$/') {  
          rule.options.loaders.sass.push(sassResourcesLoader)  
          rule.options.loaders.scss.push(sassResourcesLoader)  
        }  
        if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) {  
          rule.use.push(sassResourcesLoader)  
        }  
      })  
    }
  }
}

6. nuxt和vue的区别

（1）路由
nuxt按照 pages 文件夹的目录结构自动生成路由
vue需在 src/router/index.js 手动配置路由
（2）入口页面
nuxt页面入口为 layouts/default.vue
vue页面入口为 src/App.vue
（3）webpack配置
nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置。
vue关于webpack的配置存放在build文件夹下。

7. 编译过程

（1）加载nuxt.config.js；
（2）初始化nuxt，builder，开始执行构建；
（3）准备模板使用的参数，然后根据模板生成真正的webpack编译的js；
（4）分别执行客户端编译和服务端编译，生成最终的js脚本；
（5）编译成功后，就需要启动服务，监听端口，这个是在npm run start中实现的。

关于nuxt.js先写这些了，更多内容还是要去看官网文档哦~

关注微信公众号【CC前端手记】一起学更多前端小知识吧~