nuxt开发-前言

之前公司的项目前身是jq前后端不分离的商城项目，使用响应式去适配移动端和pc端。随着业务的发展。一套代码维护起来相当麻烦，所以考虑seo的情况下，我们技术栈以nuxt+koa+elemenUI配合去重构这个项目。加上最近自己在学习Vue全家桶+SSR+Koa2开发的一个项目，刚好可以把这个过程中遇到的坑和学习到的知识点作为一个系列记录下来。

一、nuxt安装基础项配置

# npx create-nuxt-app nuxt-learn 提示中我们只需根据提示安装我们所需要的内容即可
# npm install sass-loader node-sass 安装sacc

二、nuxt工作流

三、nuxt路由

用法上和vue-router大致一样，区别是nuxt路由创建即配置。比如创建了一个review页面，它会自动给我们加上路由，让review的路由配置review的文件，做了映射。会把review文件作为你配置的一个入口文件。

四、ssr是什么?

1. ssr主要是为了解决SEO问题
2. 解决内容快速展示效果

五、 ssr实现的原理？为什么把模版和数据同时给我们？

1. 首先静态内容没有交互，交互在浏览器端完成，其实它有一个入口文件也会进行编译，但不会直接渲染页面，因为页面在服务端扔过来的时候已经过一次渲染了。nuxt做的是将创建的虚拟编译结果和扔给我们的数据做对比。如果有区别，它会重新请求数据。编译结果，也可以理解虚拟Dom，编译需要数据，编译结果是什么？需要什么东西。第一个是模版，项目是一套模版，一套代码。这种同构导致，浏览器端编译虚拟Dom,也依赖vue文件，所以需要额外数据，他是在服务器端渲染之前请求数据，如果数据不同步到浏览器端。编译结果必然不同。

这里以美团网举例，nuxt给到我们的数据是通过创建一个script标签。然后在window上挂载一个属性对象，将返回的结果赋值给它