nuxt项目目录结构
-
Assert：放未编译的静态资源，和staci的区别是assert的资源后面还是需要进行webpack编译，但是static的资源不需要webapck编译
-
static： 存放应用静态文件，nuxt不会使用webpack编译打包static目录，最终会直接将static目录下的文件映射到根目录 **
** 举个例子 **:** /static/robots.txt 映射至 /robots.txt -
Components：放置2级及更深级的组件，并且componets下的组件不具有nuxt的 服务端渲染的asyncData 方法的特性
-
Pages：pages目录下的页面组件，nuxt会默认生成路由信息，并且nuxt提供服务端渲染asyncData 方法；pages目录下组件默认都会进行服务端渲染和客户端双端渲染，因为服务端的渲染是基于html维度的，pages页面下的组件收拾首路由加载在html中的，所以pages下的组件会在双端渲染，双端渲染需要注意的问题是，浏览器的api比如storage等不可以在pages下的vue组件中使用，因为服务端渲染时没有浏览器的storageAPI，解决方式2种，1中是在组件中通过process.client进行判断，或者直接在组件的mounted中使用storage，这时候已经渲染并且挂在到网页了。
Nuxt.js 依据 pages 目录结构自动生成vue-router 模块的路由配置。 页面之间可以通过跳转，这个和我们使用router-link一样。 动态路由在文件前面添加_即可,路由组件内也可内置参数校验器，会返回一个布尔值，例：
export default {
validate ({ params }) {
// 必须是number类型
return /^\d+$/.test(params.id)
}
}
-
layouts： 组织页面布局，渲染出口是，default默认布局自动被每个路由组件引入，自定义布局可以通过layouts指定（指定了自定义路由就不会引入default路由了）；layout/error.vue为默认错误页面，可接收错误信息对象，只支持服务端部署方式
-
middleware： 存放中间件
-
plugins： 组织根vue组件实例化之前 需要运行的js插件。nuxt会在vue.js程序启动前调用 plugins目录下的脚本,并且以context(上下文对象)作为参数, 可以取到$axios（可以在nuxt.config.js的plugins中配置某个pluginJs是否需要服务端渲染等）
-
Store：组织vuex的状态树，nuxt集成了vuex状态树的配置，在store中创建index.js可以激活nuxt的配置
-
nuxt.config.js: nuxt的个性化配置
nuxt.config.js配置：
-
build：进行自定义webpack构建配置
-
css： 定义全局的样式文件，模块或第三方库
-
head：指定网页的title和meta等
-
plugins：该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件；在根目录plugins下添加的插件，需要在这指定路径（一般直接引入的是plugins项目目录下的）
-
router：覆盖nuxt默认的vue-router配置
-
mudules：比如sentry，下载sentry之后可以在module中配置sentry，表示将第三方插件sentry注入到nuxt，这样就可以跟获取axios，router，context的方式一样获取sentry
modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限的集成
nuxt针对vue的补充
async asyncData(context)：asyncData是在组件加载之前，直接在像服务端请求数据，此时没有this，可以借助context当前页面上下文；一般是在created中进行请求，此时需要等待后端请求，但asyncData是在组件加载之前就请求后端拿数据，所以性能好一些。asyncData返回一个对象,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件
fetch(context) ：用于在渲染页面前填充应用的状态树（store）数据，此时组件还没加载，在加载组件之前fetch会填充store数据，nuxt会等到store数据填充完了之后 **页面组件才会渲染。
nuxt针对vuex的补充：
直接根目录下建store.js，nuxt查找store如果该目录存在，它将做以下的事情：
- 引用 vuex 模块
- 将 vuex 模块 加到 vendors 构建配置中去
- 设置 Vue 根实例的 store 配置项
所以我们不用手动挂在store到Vue实例上，nuxt会搞定
nuxtServerInit方法：
如果在状态树中指定了 nuxtServerInit 方法，Nuxt.js 调用它的时候会将页面的上下文对象作为第 2 个参数传给它（服务端调用时才会酱紫哟）。当我们想将服务端的一些数据传到客户端时，这个方法是灰常好用的
context
备注
有html结构的是真实dom，只有css和script引入js的是服务端渲染
一般首页会有html真实dom，因为需要让搜索引擎知道网站是做什么的
Vue和react的spa都是直接渲染vdom的,没有真实dom；但是Nuxt是把client端的vdom渲染成真实dom的html标签，然后把真实dom的html标签作为“字符串.js”，然后将已经渲染好的真实html以字符串的形式，发送到client端。client以script标签的形式引入，所以服务端渲染的页面查看网页源代码是没有html只有
Components下组件pages组件中引入，服务端是会调用components下的组件的created方法。
