七二、Vue服务器渲染Nuxt.js介绍篇

什么是ssr

SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传给浏览器。
优点

• SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
• 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

什么是Nuxt.js

本质上来说 SSR 是node后端的操作行为，作为只想好好写前端代码的我，不想太折腾。而 Nuxt.js 非常完美地整合了 SSR 的功能。让我们可以开箱即用~官方也推荐使用 Nuxt.js 来搭建 SSR 项目。具体请移步官方文档
优点

• 无需配置Webpack：我一开始还在找Webpack配置呢，看了文档知道nuxt都帮我们封装好了。如需修改Webpack配置只需修改nuxt.config.js 文件。
• 无需node知识：只要你会写vue前端，你就可以写出SSR。无需知道SSR和node、express的配置方法。
• 整合了vue全家桶，直接可用。方便程度不亚于 vue-cli：安装Nuxt——写组件——编译并启动服务———看效果。就这么简单。

安装

Nuxt.js团队创建了脚手架工具 create-nuxt-app。
确保安装了npx（npx在NPM版本5.2.0默认安装了）：
$ npx create-nuxt-app <project-name>
或者用yarn ：
$ yarn create nuxt-app <project-name>
或者使用vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <project-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

tip:如果安装失败，建议升级node到最新版

目录结构

• assets 需要编译的资源文件，如 JavaScript、SASS、LESS 等。
• static 不需要编译的静态资源文件，如图片资源。
• components 顾名思义，存放 *.vue 组件的地方。常规 vue 组件写法。
• layouts 布局目录，设置布局的地方，其中 标签是我们写的页面内容。可用作添加导航栏、底部栏等截面。
• middleware 中间件目录，所谓中间件，就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
• pages 页面目录。重点来了~这就是我们存放展示页面的地方。该目录下的文件会转换成相应的路由路径供浏览器访问。另外呢，该目录下的 *.vue 页面文件中 Nuxt.js 提供了一些特殊的方法用于处理服务器渲染中的事件。具体关于路由和特殊方法列举在下面了。
  • pages 路由
  • 页面组件的简单介绍，具体特殊配置项的用法请查阅API。
• plugins 插件目录，像 mint-ui 这种第三方插件就放在这里啦~具体用法看这里。
• store vuex 状态管理器目录，如果该目录是空的， Nuxt.js 将不启用 vuex。当我们在该文件夹下创建 index.js 文件后即可使用 vuex 状态管理器。官方文档！
• nuxt.config.js 该文件是 Nuxt.js 的唯一配置项，之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了，所以如果需要特殊配置，只需要修改该文件来覆盖默认配置即可。具体配置参数请查阅API。
• package.json