Vue + Nuxt 服务端渲染从入门到放弃（1）

什么是服务端渲染

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"**"为客户端上完全可交互的应用程序。

这里直接引用Vue官网的解释，通俗的讲就是本来网页通过浏览器执行Js代码来渲染的内容。现在直接通过服务端渲染完成返回HTML代码给浏览器看。

服务端渲染优缺点

优点：

• 更好的 SEO，因为服务端直接返回了HTML代码，搜索引擎会直接解析，传统的单页面应用由于需要通过Js渲染导致搜索引擎获取不到内容。
• 首页白屏的时间变短了，这个很好理解。

缺点：

• 开发变的更加复杂，本来只需要考虑客户端，现在还要考虑服务的存在的问题。比如服务端没有window等对象，导致许多功能无法在服务端实现。

• 服务端的性能要求变高类，原先只需要把打包的代码直接放在Nginx托管就可以类，现在还需要运行Nodejs进程来保证服务运行。（原来500M内存的ECS跑不起来了????，又给阿里赚了一波钱）

什么是Nuxt.js

简单讲就是 Vue + Vue-Router + Vuex + Vue-Meta ~= Nuxt.js
这是一个集成类上述框架并且实现类服务端渲染的UI框架。它既可以选择服务端渲染也可以使用静态渲染。

创建一个Demo

创建项目命令

yarn create nuxt-app demo

运行之后会进行项目基本配置，这里直接按照最简单的配置选择。

rendering mode 推荐选择Universal模式，不然选择服务端渲染的意义就不大了。

---

生成的项目package.json非常的简单

{
  "name": "demo",
  "version": "1.0.0",
  "description": "nothing",
  "author": "luws",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "iview": "3.1.5"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

项目目录结构和Vue项目存在一些区别，每个目录作用Nuxt官网都做了解释看这里

pages: 和vue项目的一些不同之处在于没有类router,这里直接以目录结构的形式来生成router配置。官网示例

middleware：中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。通过这个可以替代一些路由的钩子函数。

plugins：一些插件的引用都需要放在这里调用，非常有用，比如UI框架注入。

nuxt.config.js： 这个文件相当于vue.config.js。可以做整个项目的配置，以及一些插件的使用。

---

运行demo

yarn run dev

运行之后默认使用3000端口

总结

到此为止Nuxt的demo创建完成。照着官网给的文档和demo都可以很快的完成配置，基本3分钟就出来类。由此证明一个好文档可以节省很多时间。
下一篇开始讲如何Nuxt的具体使用以及其中存在的一些问题。