Vue服务端渲染框架之Nuxt

1. 什么是服务器端渲染？
服务器端渲染：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的HTML页面，再直接返回给浏览器，以便用户浏览。

2. 什么是客户端渲染？
客户端渲染：数据由浏览器通过ajax动态取得，再通过js将数据填充到dom元素上最终展现到网页中，这样的过程叫做客户端渲染。

3. 服务器端渲染 VS 客户端渲染？
（1）服务器端渲染需要消耗更多的服务器端资源（CPU、内存等）；
（2）客户端渲染可以将静态资源部署到cdn上，实现高并发；
（3）服务端渲染对SEO更有好。

4. Vue的SSR框架？
https://github.com/vuejs/vue-hackernews-2.0

5. Nuxt的安装？
npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
npx方式：npx create-nuxt-app my-app
使用这条命令可以避免开发者全局安装一个脚手架。

6. Nuxt目录结构？

--nuxt
  |_ assets // 组织未编译的静态资源 如：less sass 
  |_ components // 组件目录
  |_ layouts // 组织应用的布局组件
  |_ middleware // 用于存放应用的中间件 比如一些权限请求
  |_ pages // 页面
  |_ plugins // 插件目录
  |_ static // 静态文件
  |_ store // vuex状态树文件
  |_ nuxt.config.js // nuxt的配置文件

7. nuxt引入less，使用less全局变量？
首先安装依赖，执行：npm install less less-loader @nuxtjs/style-resources sass-resources-loader --save-dev
修改nuxt.config.js文件，新增如下：

  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    less: [
      './assets/less/variable.less',
      './assets/less/mixin.less',
    ]
  },

8. nuxt中引入全局css文件？
修改nuxt.config.js文件：

  /*
  ** Global CSS
  */
  css: [
    './assets/animation/animation.css'  // animation.css文件将会全局引入
  ],

9. nuxt中路由切换的过渡效果 transition？
（1）全局过渡效果设置，在全局css文件中添加样式：

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

（2）给单独的页面设置过渡效果，则先需要加上css样式，然后再在页面中设置transition属性，如下所示：

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

export default {
  transition: 'test'
}

10. nuxt中融合ESLint？
在实际项目开发中，经常会使用ESLint来规范代码格式，如果在初始化Nuxt时没有引入ESLint，那么需要后续手动引入一下，过程如下：
（1）先安装一些依赖，执行npm install babel-eslint eslint eslint-friendly-formatter eslint-loader eslint-plugin-vue --save-dev
（2）在package.json文件的scripts标签中添加如下代码：

"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."

（3）在项目的根目录下新增.eslintrc.js和.eslintignore文件。（详细配置省略）
（4）修改nuxt.config.js文件，新增如下（目的是扩展webpack配置）：

  build: {
    /*
    ** Run ESLint on save
    */
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
    }
  }

11. nuxt中融合vant框架？
在实际的项目中经常会用到一些UI框架，这里以vant举例，介绍nuxt如何引入vant UI框架：
（1）安装vant，执行：npm install vant --save；
（2）在plugins文件夹下建一个vant.js文件，引入vant的css文件及相关组件，如下所示：

import Vue from 'vue'
import 'vant/lib/index.less'

import { Tabbar, TabbarItem, Toast, Button } from 'vant'
Vue.use(Tabbar).use(TabbarItem).use(Toast).use(Button)

（3）配置nuxt.config.js中的plugins，如下所示：

  plugins: [
    {
      src: '~/plugins/vant.js',
      ssr: false  // 因为是UI框架，所以可以不要服务端渲染
    }
  ],