文章目录

• 1. 介绍
• 2. 生命周期
• 3. 项目创建
• 4. 声明式导航和编程式导航
• 5. 动态路由参数和验证
• 6. 嵌套路由
• 7. 404页面
• 8. 配置式路由
• 9. 定制默认应用模板
• 10. 扩展默认布局
• • 10.1 默认布局
  • 10.2 自定义布局
  • 10.3 显示错误的布局

1. 介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

• Vue 2
• Vue-Router 【约定式路由】
• Vuex (当配置了 Vuex 状态树配置项 时才会引入)
• Vue 服务器端渲染
• Vue-Meta

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

2. 生命周期

在 vue 中，输入要访问的页面网址，回车之后 vue 会先做客户端渲染，然后发送网络请求，拿到数据，然后做相关处理后渲染出完整页面。

而在 nuxt 中，输入网址回车之后，会先发送请求给服务器，然后服务器会查找数据库，把数据得到之后，进行整理后生成 html ，然后发送给客户端。

3. 项目创建

yarn 安装：

yarn create nuxt-app < project-name >
cd project
yarn
yarn dev

npm 安装：

npm init nuxt-app 

4. 声明式导航和编程式导航

声明式导航：

编程式导航：

5. 动态路由参数和验证

首页：

新闻页：

错误页：

6. 嵌套路由

后台管理页：

用户路由：

7. 404页面

8. 配置式路由

在 nuxt.config.js 文件中添加配置：

// 路由配置 也可以进行配置式路由
router: {// 全局中间件注册// middleware: 'checklogin',// 动态添加路由extendRoutes(routes, resolve) {// 使用 push 添加要注意在pages中不能有_.vue这样的文件，否则路由匹配不成功// routes.push({//   path: '/abc',//   component: resolve(__dirname, 'pages/about.vue')// })// 如果你用_.vue，则需要用unshift方法来动态添加路由信息routes.unshift({path: '/abc',component: resolve(__dirname, 'pages/about.vue')})}
}

9. 定制默认应用模板

你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。

我是模板
{{APP}}

10. 扩展默认布局

10.1 默认布局

Nuxt.js 允许你扩展默认的布局，在 layout 目录下创建自定义的布局。可通过添加 layouts/default.vue 文件来扩展应用的默认布局。别忘了在布局文件中添加 组件用于显示页面的主体内容。

假如现在有一个登录页面，如果不对布局进行配置，默认会显示全局布局文件：

10.2 自定义布局

现在我们在 layouts 目录下，创建一个 login.vue 布局文件（layouts/login.vue）：

并且在登录页面（pages/login.vue），添加自定义配置属性：

这时就会显示自定义的布局配置：

假如我们不想在当前登录页面中使用任何布局，可以在 layouts 目录下创建 empty.vue 空布局文件：

然后再将登录页面中的布局配置修改为layout: 'empty'即可：

注意：app.html 中的应用模板还会显示。

10.3 显示错误的布局

你可以通过编辑 layouts/error.vue 文件来定制化错误页面。这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误（404，500 等）的组件。

layouts/error.vue：

pages/_.vue：

最终结果会优先显示 pages 中的错误页面。如果想要显示 layouts 中的错误页面，则 pages 中的错误页面文件名不能使用下划线。