nuxt知识汇总

说白了，基于vue的ssr（服务器渲染）就是将之前vue编程中通过

进行渲染而致使seo搜索爬虫抓取不到完整html的这一弊端进行改进，通过编写renderer代码实现在服务器端渲染（合并）出完成html输出到浏览器。

而nuxt.js就是对vue实现此功能的高度封装，将原本vue不能seo、不能查看完整源代码的应用变成了一个能支持seo能查看完成源代码支持爬虫抓取的应用，并且还提供了额外的功能，比如静态站点生成。

so，使用nuxt.js的优点：

1）自动生成路由文件，不用自己配置

2）模板输出之前就已经请求完数据，所以其实最后输出的是html的静态文件吗？

nuxt.js服务器渲染流程

nuxt.js文件

1）no-ssr.js

主要判断是否需要将子组件进行渲染，如果不需要或者用默认布局等，则不能渲染。

2）nuxt-child.js

主要是遍历所有组件，对transition效果和listener的一些相关的配置，并把组件和相关transition关联起来。

3）nuxt-loading.vue

主要是对加载是否成功的一些函数的定义和css属性等的配置。

4）nuxt.vue

将子组件引入（也包括error页）

5）app.template.html

是nuxt所有模板的html展示页面，dom结构。

6）App.vue

是项目的主文件vue，

就在这里（相当于）。

7）client.js

包括处理热加载，加载中间件等配置，还创建了vue实例，将#__nuxt加进去，并将path加入到router中，然后在创建vue，将他们都创建了实例，串起来了。

8）index.js

创建app工厂，并将router和store都注入到所有的子组件中。

9）server.js

实现服务器渲染。

10）store.js

是vuex（状态管理架构）里用来储存状态的，可以共享给其他的vue组件，就是存储数据和管理数据方法的仓库，实现方式是将数据和方法以对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！

11）utils.js

配置需要的一些函数和方法。

挂载过程如下：

vue浏览器渲染和nuxt的服务器渲染对比：

注意：

以上用的是vue init nuxt-community/starter-template新手模板安装的源码解释内容，用vue init nuxt-community/express-template模板也差不多（不过没有了store文件夹），这些新手模板安装完成后，已经封装了store状态管理内容，通过的是createApp工厂模式为每个组件创建实例，然后将router和store加入进去，使得每个组件都能用this.$store。

但是当不用模板而完全自己构建的话，就需要构建vuex状态树来对组件的store进行管理，在surmon项目中的状态管理用的是vuex状态树的模块方式：

1）store目录下的每个.js 文件都转换成状态树指定命名的子模块（eg：todos.js）

2）在页面组件（eg：todos.vue）下可以使用todos模块：this.$store.state.todos.list

具体可参见https://zh.nuxtjs.org/guide/vuex-store

用vuex状态树去管理store就用store里的数据去渲染页面，就不用再new Vue了。