Vue服务端的渲染

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

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

服务端渲染 vs 客户端渲染

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

Vue服务端渲染的实现

1. 安装依赖： npm install vue vue-server-renderer --save
2. 编写代码：

vue服务端渲染的原理

1. 通过express创建一个静态web服务器
2. 通过vue-server-renderer将vue实例转换成一段html结构
3. 通过express将转换的html结构发送到前台，在前台页面进行展示

vue服务器端渲染的实现

1. 如果使用单文件组件，需要配合webpack来使用
2. 如果想了解服务器端的webpack配置，可以看这个官方提供的工程 ： 服务器端webpack配置网址
3. 下载官网提供的项目包
4. vs code安装插件来查看项目 @recommended

nuxt
使用npm v5.2.0引入的一条命令（npx）,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验
举例： 使用express-generator创建项目
老方法： npm install express-generator -g
express app

npx 方法：npx express app (npx可以减少我们全局安装脚手架)

1. 安装;npx create-nuxt-app app
   npm i

   cd app

   yarn run dev

2. 项目目录结构:nuxt-目录结构：nuxt-目录结构

3. 配置 - nuxt.config.js
   nuxt-配置：nuxt-配置
   举例： 配置 scss
   

4. 路由 (https://zh.nuxtjs.org/guide/routing)
   . 基础路由
   . 动态路由
   . 路由传参
   . 嵌套路由

5. 视图(https://zh.nuxtjs.org/guide/views)

6. 异步数据(https://zh.nuxtjs.org/guide/async-data)

7. 资源文件(https://zh.nuxtjs.org/guide/assets)

8. 插件(https://zh.nuxtjs.org/guide/plugins)

9. 模块(https://zh.nuxtjs.org/guide/modules)

10. vuex状态树(https://zh.nuxtjs.org/guide/vuex-store)

11. 命令和部署
    命令：

• nuxt启动一个热加载的Web服务器（开发模式） localhost:3000。
• nuxt build利用webpack编译应用，压缩JS和CSS资源（发布用）。
• nuxt start以生产模式启动一个Web服务器 (nuxt build 会先被执行)。
• nuxt generate编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)
  部署：
  服务器部署
  $ nuxt build || $ nuxt start
  静态站点部署
  $ npm run generator