Nuxt.js 教程
Nuxt.js 参考了什么
2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。
Nuxt.js 是什么？
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端 / 服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。
作为框架，Nuxt.js 为 客户端 / 服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
Nuxt.js 框架是如何运作的？
基于 Vue、Webpack 和 Babel
Nuxt.js 集成了以下组件 / 框架，用于开发完整而强大的 Web 应用：
- Vue 2
- Vue-Router
- Vuex （当配置了 Vuex 状态树配置项 时才会引入）
- Vue 服务器端渲染 （排除使用 mode: ‘spa’)
- Vue-Meta
压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。
另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。
特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES2015+ 语法支持
- 打包和压缩 JS 和 CSS
- HTML 头部标签管理
- 本地开发支持热加载
- 集成 ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送
服务端渲染（通过 SSR)
您可以使用 Nuxt.js 作为框架来处理项目的所有 UI 呈现。
启动时 nuxt，它将启动具有热更新加载的开发服务器，并且 Vue 服务器端渲染配置为自动为服务器呈现应用程序。
单页应用程序 (SPA)
如果您不想使用服务器端渲染或需要应用程序提供静态托管，则可以使用 nuxt –spa 命令即可使用 SPA 模式。 它为您提供了强大的 SPA 部署机制，无需使用 Node.js 来运行应用程序或任何特殊的服务器端处理。
可以查看 Nuxt.js 提供的各种 命令 来了解更多相关使用信息。
如果你的项目有自己的 Web 服务器（例如用 Express.js 启动的 Web 服务），你仍然可以将 Nuxt.js 当作是中间件来使用，负责 UI 渲染部分的功能。在开发通用的 Web 应用过程中，Nuxt.js 是可插拔的，没有太多的限制，可通过 开发编码中使用 Nuxt.js 了解更多的信息。
安装
Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。
运行 create-nuxt-app
为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
$ npx create-nuxt-app <项目名>
或者用 yarn ：
$ yarn create nuxt-app <项目名>
它会让你进行一些选择：
在集成的服务器端框架之间进行选择：
- None (Nuxt 默认服务器）
- Express
- Koa
- Hapi
- Feathers
- Micro
- Fastify
- Adonis (WIP)
选择您喜欢的 UI 框架：
- None （无）
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- iView
- Tachyons
选择您喜欢的测试框架：
- None （随意添加一个）
- Jest
- AVA
然后你需要
- 选择你想要的 Nuxt 模式 (Universal or SPA)
- 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
- 添加 EsLint 以在保存时代码规范和错误检查您的代码。
- 添加 Prettier 以在保存时格式化 / 美化您的代码。
当运行完时，它将安装所有依赖项，因此下一步是启动项目：
$ cd <project-name>
$ npm run dev
应用现在运行在 http://localhost:3000 上运行。
注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。
