定义：是一个基于Vue.js的通用应用框架，注重于UI的渲染。
1. 路由：路由无需配置，nuxt会根据pages目录下面的 .vue 文件自动生成路由信息
1》页面之间跳转使用路由，使用<nuxt-link> 标签。如下所示：
<template> <nuxt-link to="/">首页</nuxt-link> </template>
2》 基本路由结构如下：
3》动态路由结构如下：
名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。
如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。
在 pages/users/_id.vue 组件里面需要对路由参数进行基本的校验：校验如下：
export default { validate({ params }) { // 必须是number类型 return /^d+$/.test(params.id) } }
如果校验失败，将自动加载显示404错误页面或500错误页面
2. 视图：
1》模板：相当于vue项目的public/index.html文件，定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。默认模板代码如下：
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
可以在默认模板的基金上进行修改，例如：添加 IE 的条件表达式，代码如下：
<!DOCTYPE html> <!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]--> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
2》布局：layouts:
《1》默认布局：可通过添加 layouts/default.vue 文件来扩展应用的默认布局。默认布局代码如下：
<template> <div> <nuxt /> </div> </template>
《2》自定义布局：
假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt />
</div>
</template>
然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：
<template> <!-- Your template --> </template> <script> export default { layout: 'blog' // page component definitions } </script>
3》错误页面：
你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">页面不存在</h1>
<h1 v-else>应用发生错误异常</h1>
<nuxt-link to="/">首 页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>
4》HTML头部：
Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。
Nuxt.js 使用以下参数配置 vue-meta如下：
{ keyName: 'head', // 设置 meta 信息的组件对象的字段，vue-meta 会根据这 key 值获取 meta 信息 attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名 ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 meta 信息已完成服务端渲染的属性名 tagIDKeyName: 'hid' // 让 vue-meta 用来决定是否覆盖还是追加 tag 的属性名 }
5》默认 Meta 标签
Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：
head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } ] }
3. 异步数据：
asyncData：设置组件的数据之前能异步获取或处理数据
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。
在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用asyncData方法来获取数据。
由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过this来引用组件的实例对象。
具体使用后续再更新。。。。。。
4. 资源文件
默认情况下Nuxt使用vue-loader、file-loader以及url-loader这几个Webpack加载器来处理文件的加载和引用。
对于不需要通过Webpack处理的静态资源文件，可以放置在static目录中。
Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。
<!-- 引用 static 目录下的图片 --> <img src="/my-image.png" /> <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 --> <img src="~/assets/my-image-2.png" />
assets里面的静态资源文件是需要走webpack的，webpack可以对资源进行压缩、改名、转换等等的操作。
static文件下面的静态资源文件就不会走webpack,资源文件保持原有的。
5.插件
Nuxt.js允许我们在运行vue.js应用程序之前执行js插件
需要注意的是，在任何Vue组件的生命周期内，只有beforeCreate和created这两个方法会在客户端和服务端被调用。
其他生命周期函数仅在客户端被调用。
1》使用第三方插件就不再多作说明
2》使用Vue插件
假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。
首先增加文件 plugins/vue-notifications.js：
import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)
然后，在 nuxt.config.js 内配置plugins 如下：
module.exports = { plugins: ['~/plugins/vue-notifications'] }
3》只在客户端使用的插件
不支持ssr的系统，插件只在浏览器里使用，这种情况下，你可以用 ssr:false ,使得插件只会在客户端运行
nuxt.config.js:
module.exports = { plugins: [{ src: '~/plugins/vue-notifications', ssr: false }] }
<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />
<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />