官方网站
总结时版本
"nuxt": "^2.4.0","koa": "^2.6.2"
开源时间
16年12月25日,react.js的next发布,几个小时后nuxt发布,基于vue.js
作用
更快的响应数据,seo友好,服务端加载数据,渲染,吐出完整的html页面
特点
需要基于node作为中间层转发,钩子函数区分服务端和客户端,框架的文件夹配置很重要,不能随便改,比如pages目录下的东西,每个文件就是一个默认的路由,index.vue是程序的入口路由,没有其他的配置文件了,也就是创建就是配置
构建
npm run build生成静态文件,npm start启动node服务器,nuxt.render函数,处理页面请求,nuxt generate生成静态站点,利于微服务部署,基于静态文件部署
框架运作
vue.js + webpack + bablel + vue-loader + babel-loader等
流程图
request – nuxtServerInit – middleware – validate – asyncData(fetch) – render,跳转页面后,又开始从middleware开始运行,nuxtServerInit的作用是在vuex的actions内运行,可以拿到一些服务端的数据,比如session,用户验证信息等,然后通过vuex返回给客户端,
以上钩子,都是在服务端执行,且都是在pages页面下有钩子函数,而components和layout没有;beforeCreated和created是服务端和客户端都执行的钩子函数,切记,没有window对象,操作dom必须在mounted钩子,不支持keep-alive,所有它的钩子也没有
- Middleware
执行流程为nuxt.config.js - 匹配布局 - 匹配页面,先在Middleware文件夹下创建中间件,在nuxt.config.js中引入,然后会去找layout中有没有,然后会去找,pages页面中有没有,中间件就是执行过程中处理的一些问题,或是验证信息,或是拿到一些信息,可以保存,可以跳转等 - Validate
在动态路由对应的页面来验证参数,如果验证不通过,可以返回404页面,在pages页面中使用 - asyncData
服务端执行,可以拿到ctx对象,可以异步请求,然后返回一个对象,这个对象会和页面的data对象合并,频繁使用
项目目录结构
- Assets
用于存放静态文件,会被webpack编译,比如css会被压缩,图片会被require进来,可能会打成base64 - Static
由于存放静态文件,不会被编译,会复制到构建后的项目,可以用来存放一些文本,数据文件等 - Layouts
布局文件,每个页面公共的部分,可以自定义再引如,默认是default,可以运行一些钩子,比如中间件等 - Middleware
中间件,先创建,再配置,再使用,可以拦截一些东西 - Pages
页面组件,也是路由,支持所有的特殊钩子函数 - Components
组件,主要是pages组件下面的子组件,特殊钩子都没有,注意,就是用来处理业务逻辑,解耦应用 - Plugins
插件目录,比如elementUi等插件,就在这里创建引入和配置,然后就可以全局使用,可以操作挂载到vue实例或者是挂载ctx对象上,这样对于的可以使用this或者ctx对象的地方就可以使用了 - Store
vuex,默认下载了,配置即可,不需要单独下载,分为经典模式和模块模式,推荐使用模块模式
配置文件 nuxt.config.js
- Build
允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的,比如axios,如果不添加到这里,那么就是打包进vendor.bundle.js了,但是配置了,那么就会单独打个包进来,多个文件请求,加快请求速度 - Cache
开启组件缓存,提示访问速度,可能会报错,三思 - Css
加载第三方css,比如elementu的css,assets中的全局reset.css等 - env
配置环境变量,可以让客户和服务端共享数据 - Generate
该配置项用于定义每个动态路由的参数,Nuxt.js 依据这些路由配置生成对应目录结构的静态文件 - Head
该配置项用于配置应用默认的meta标签 - Loading
该配置项用于个性化定制 Nuxt.js 使用的加载组件 - Plugins
该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件 - Router
该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置 - Transition
过渡动画