Vue SSR 项目 Nuxt.js 框架之《安装与创建》

Nuxtjs 是一个基于 Vuejs 的通用应用框架，预设了利用 Vuejs 开发 服务端渲染 的应用所需要的各种配置。可以更方便的实现 Vue 项目的 SSR 。具体的可详见 官网 ，这里不再过多赘述。

方法一：

方法二：

出现上图即可按照提示， cd 到我们的文件夹，然后运行命令启动项目，启动成功后如下图
assets ：资源目录，用于组织未编译的静态资源如 LESS 、 SASS 或 JavaScript 。
components ：组件目录，用于组织应用的 Vuejs 组件。Nuxtjs 不会扩展增强该目录下 Vuejs 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
layouts ：布局目录，用于组织应用的布局组件。
middleware ：中间件目录，用于存放应用的中间件。
pages 页面目录，用于组织应用的路由及视图。Nuxtjs 框架读取该目录下所有的 vue 文件并自动生成对应的路由配置。
plugins ：插件目录，用于组织那些需要在 根vuejs应用 实例化之前需要运行的 Javascript 插件。
static ：静态文件目录，用于存放应用的静态文件，此类文件不会被 Nuxtjs 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，即 /static/robotstxt 映射至 /robotstxt
store ：状态管理目录，用于组织应用的 Vuex 状态树 文件。 Nuxtjs 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 indexjs 文件可激活这些配置。
nuxtconfigjs ：用于组织 Nuxtjs 应用的个性化配置，以便覆盖默认配置。
packagejson ：用于描述应用的依赖关系和对外暴露的脚本接口。

更多介绍详见 官网-目录结构

1、服务端渲染

服务端渲染对于刚接触vue的新手来说，并不是那么友好，虽然已有官方SSR中文文档。但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战。

2、预渲染方式

在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用webpack，您可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试。

基于vue-cli3的项目，改造成SSR。
服务端渲染会提取组件的样式内联到html中，与link标签中的重复，使得页面体积变大，导致响应时间很慢。
原因是ssr会自动进行资源注入 Manual Asset Injection ，包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数，关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中
当创建bundlerender的时候，我们可以使用一个模板，在这个模板里面预置页面所需要的各种资源。

思来想去，csr（客户端渲染）模式下生成的indexhtml再合适不过了。
而且，当build csr时，我们也可以预置一个模板，在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vueconfigjs和build script(windows 平台)

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby

1、创建并进入一个新目录

2、使用你喜欢的包管理器进行初始化

3、将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

4、创建你的第一篇文档

5、在 packagejson 中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

6、在本地启动服务器

VuePress 会在 >

react-coat

react-coat 特点

集成 react、redux、react-router、history 等相关框架

仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏性

结构化前端工程、业务模块化，支持按需加载

同时支持 SPA(单页应用)和 SSR(服务器渲染)

使用 typescript 严格类型，更好的静态检查与智能提示

开源微框架，源码不到千行，几乎不用学习即可上手

这款可以满足你，带完整Demo示例

服务端渲染 ：DOM树在服务端生成，然后返回给前端。

客户端渲染 （SSR）：前端去后端取数据生成DOM树。

服务端渲染的优点 ：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

服务端渲染的缺点 ：

1、不利于前后端分离，开发的效率降低了。

2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

客户端渲染的优点 ：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

客户端渲染的缺点 ：

1、前端响应速度慢，特别是首屏，这样用户是受不了的。

2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

服务端和客户端渲染的区别 ：

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

应该使用服务端渲染还是客户端渲染：

我们要根据业务场景去选择渲染的方式。

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用 服务端渲染和客户端渲染结合 的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

ssr学习法有7种。ssr是基于HTML来收录网站，只能爬到一个空的HTML页面，ssr学习法有7种是，先执行js，生成dom，发送请求，请求返回后，浏览器解析数据， *** 作数据，重新渲染dom，能够带来接近原生app的体验，能够前后端分离，ssr渲染：请求发送到node服务器上接收到请求后，分析是请求的那个页面，node服务端拿到这个页面的组件，将这个页面，设计的js执行完，生成HTML，返回给服务器。

---