为什么要使用Nuxt
1. 什么是服务端渲染（SSR）？
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
2. 为什么使用服务器端渲染(SSR)？
与传统的SPA（单页面应用程序）相比，服务端渲染的优势主要有哪些？
- 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。\ 如果你的应用程序初始展示Loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
- 更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好
使用服务器端渲染(SSR)时还需要有一些权衡之处：
- 首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。。
- 由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境下，还要做好服务器负载和缓存策略
3. 总结：SSR应用场景：
- 有SEO需求
- 需要首屏渲染速度快
4. 实现Vue SSR的两种方式：
- 基于官方Vue SSR指南文档的官方方案，官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。
- vue.js通用应用框架--NUXT，NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。
Nuxt开发环境搭建
1.搭建node环境
node下载地址：npm.taobao.org/mirrors/nod…，进入node下载的淘宝镜像地址，选择最新的安装包(也可选择稳定的安装包） .msi文件，对应自己开发环境，如图。
下载完毕之后选择安装，一直点击下一步即可，安装完毕之后打开cmd，输入node -v，查看是否安装成功。
2.初始化项目
运行 create-nuxt-app
通过 Nuxt 官方提供的脚手架工具 create-nuxt-app 初始化项目：
$ npx create-nuxt-app <项目名>
或
$ yarn create nuxt-app <项目名>
项目配置
项目创建的时候会让你进行一些配置的选择,可根据自己需要进行选择。
项目运行
运行完后，它将安装所有依赖项，下一步是启动项目：
$ cd <project-name>
$ npm run dev
在浏览器中，打开 http://localhost:3000
目录结构
.
├── assets // 用于组织未编译的静态资源
├── components // 用于组织应用的 Vue.js 组件
├── layouts // 用于组织应用的布局组件
├── middleware // 用于存放应用的中间件
├── node_modules
├── pages // 用于组织应用的路由及视图
├── plugins // 组织插件。
├── static // 用于存放应用的静态文件
├── store // 状态管理
├── nuxt.config.js // 配置文件
├── package.json
├── jsconfig.json
├── stylelint.config.js
├── README.md
└── yarn.lock
项目开发阶段
参考nuxt中文教程www.nuxtjs.cn/
3.项目调试
安装依赖并本地运行项目
$ npm install
$ npm run dev
项目调试报错解决办法
npm run dev 出现以下错误时, 表示需要安装sass
npm install --save-dev node-sass sass-loader 可安装sass
npm install --save-dev node-sass sass-loader 出现一下错误时,代表没有安装开发环境
安装开发工具
npm install --global --production windows-build-tools
出现卡在 Successfully installed Python 2.7 时
npm 安装 windows-build-tools 卡住，停在了 Successfully installed Python 2.7
这个问题据说是这个包自身的 bug
解决如下：
1、保证你安装了 Visual Studio
2、在资源管理中搜索 %temp% ，window 系统按住 win 按键直接搜索就可以
3、在搜索到的文件夹 %temp% 中创建 dd_client_.log 文件，并且填入内容 Closing installer. Return code: 3010.
开发环境安装成功后重新执行 npm install --save-dev node-sass sass-loader 可以正常进行安装并成功
以上问题都解决后执行 npm run dev 可正常运行项目
项目部署
nuxt 有两种打包方式 nuxt.config.js 文件需要对不同打包方式进行配置
target: 'server', //build打包用server，generate用static 默认 server
generate打包
$ npm run generate
生成 dist 文件夹，直接放到服务器就可以访问 但是 如果后台修改数据，前端还是显示之前打包的数据
build打包
本地执行 npm run build
├── .nuxt
├── static
├── nuxt.config.js
└── package.json
把这四个文件放到远程服务器中的文件夹里 在远程服务器中安装 node cmd 这个文件夹，执行
$ npm install
$ npm run start
就能生成个本地链接进行访问
npm问题记录
npm connect ETIMEDOUT 104.16.20.35:443
解决方法
npm install -g cnpm --registry=https://registry.npm.taobao.org
