Nuxt生成的目录:
middleware: 中间件(简单的来说就是一个函数)
写一个最简单的中间件:
使用中间件:
nuxt中的生命周期执行:
asyncData: nuxt增加的生命周期,在组件初始化前调用。所以没有vue中的this(只在能page页面里写)。在这个生命钩子里面return的结果会合并返回到data上面
nuxt里面顶部加载进度条:
进度条颜色:
Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置
例:
build:Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。
css:该配置项用于定义应用的全局(所有页面均需引用的)样式文件、模块或第三方库
。。。详细配置查看官网文档
路由:详细配置查看官网文档
(注意:要在页面之间使用路由,我们建议使用 标签。 相对于进行导航。相当于 将路由匹配到的组件将渲染在这里)
布局:Nuxt.js 允许你扩展默认的布局,或在 layout 目录下创建自定义的布局。
默认布局:可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 组件用于显示页面的主体内容。
假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:
然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局:
错误页面:你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).
这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误(404,500等)的组件。
举一个个性化错误页面的例子 layouts/error.vue:
插件:Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。
发送请求:如果初始化项目时加载了axios模块就可以参考https://axios.nuxtjs.org/文档(这是经过nuxt包装后的axios比较方便)
- 方法一
1、安装:npm install @nuxtjs/axios -d
- 方法二:直接引入axios,并模块化请求,就像vue中那样使用
1、安装:npm install axios --save
2、创建Axios扩展request.js在/api/request.js主要做了3件事:
- 创建axios实例
- 增加request拦截器,在请求发出前做自定义处理,比如加上token,sessionID
- 增加response拦截器,收到响应信息后判断响应状态,如果出错可以使用Message组件提示