官网：https://nuxtjs.org/
github：https://github.com/nuxt/nuxt.js

什么是Nuxt.js

易于使用的Vue 框架，使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架，让 Web 开发变得简单而强大。

为什么选择 NuxtJS

模块化

Nuxt 基于强大的模块化体系结构。您可以从 50 多个模块中进行选择，以使您的开发更快，更轻松。您无需重新发明轮子即可获得 PWA 好处，无需在页面上添加 Google Analytics 或生成站点地图。

高效率

借助 Nuxt.js，您的应用程序将得到开箱即用的优化。我们尽最大努力通过利用 Vue.js 和 Node.js 最佳实践来构建高性能应用程序。为了从应用程序中挤出所有不必要的内容，Nuxt 包括捆绑分析器和许多微调您的应用程序的机会。

令人愉快

我们的主要重点是开发人员体验。我们喜欢 Nuxt.js，并且会不断改进框架，所以您也喜欢它！
期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。 如果有问题或疑问，我们有用的社区将为您提供帮助。

特点

服务器端渲染

这是 Nuxt 最受欢迎的模式。使用 SSR（也称为 "universal" 或 "isomorphic" 模式），将使用 Node.js 服务器将基于 Vue 组件的 HTML 传递给客户端，而不是纯 JavaScript。与传统的 Vue SPA 相比，使用 SSR 将带来更大的 SEO 提升，更好的用户体验和更多的机会。

由于单独实施 SSR 可能非常繁琐，因此 Nuxt.js 可为您提供全面的支持，并将处理常见的缺陷。

静态生成

静态网站生成是当前非常热门的话题（又名 JAMStack）。与其切换到另一个框架并花时间去适应它，不如一石二鸟？ ( )

Nuxt.js 支持根据您的 Vue 应用程序生成静态网站。它是 “两全其美” 的选择，因为您不需要服务器，但仍然拥有 SEO 的好处，因为 Nuxt 会预先渲染所有页面并包含必要的 HTML。另外，您可以轻松地将结果页面部署到 Netlify 或 GitHub 页面。

Nuxt.js 安装

运行 create-nuxt-app

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>

或者用yarn ：

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

1. 在集成的服务器端框架之间进行选择:None (Nuxt默认服务器)ExpressKoaHapiFeathersMicroFastifyAdonis (WIP)
2. 选择您喜欢的UI框架:None (无)BootstrapVuetifyBulmaTailwindElement UIAnt Design VueBuefyiViewTachyons
3. 选择您喜欢的测试框架:None (随意添加一个)JestAVA
4. 选择你想要的Nuxt模式 (Universal or SPA)
5. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
6. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
7. 添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 1个文件和1个目录。如下所示：

$ mkdir <项目名>
$ cd <项目名>

提示: 将 <项目名> 替换成为你想创建的实际项目名。

新建 package.json 文件

package.json 文件用来设定如何运行 nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

安装 nuxt

一旦 package.json 创建好， 可以通过以下npm命令将 nuxt 安装至项目中：

$ npm install --save nuxt

pages 目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

创建 pages 目录：

$ mkdir pages

创建我们的第一个页面 pages/index.vue：

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目：

$ npm run dev

现在我们的应用运行在 http://localhost:3000 上运行

Nuxt.js 目录结构

资源目录

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

组件目录

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

布局目录

布局目录 layouts 用于组织应用的布局组件。

若无额外配置，该目录不能被重命名。

中间件目录

middleware 目录用于存放应用的中间件。

页面目录

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

若无额外配置，该目录不能被重命名。

插件目录

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

静态文件目录

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置，该目录不能被重命名。

Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

若无额外配置，该目录不能被重命名。

nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

若无额外配置，该文件不能被重命名。

package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

别名

默认情况下，srcDir 和 rootDir 相同。

Nuxt.js 配置

build

Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。

css

该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。

dev

该配置项用于配置 Nuxt.js 应用是开发还是生产模式。

env

该配置项用于定义应用客户端和服务端的环境变量。

generate

该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。

head

该配置项用于配置应用默认的meta标签。

loading

该配置项用于个性化定制 Nuxt.js 使用的加载组件。

modules

该配置项允许您将Nuxt模块添加到项目中。

modulesDir

该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。

plugins

该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

rootDir

该配置项用于配置 Nuxt.js 应用的根目录。

router

该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。

server

此选项允许您配置Nuxt.js应用程序的服务器实例变量。

srcDir

该配置项用于配置应用的源码目录路径。

dir

此选项允许您配置Nuxt.js应用程序的自定义目录。

transition

该配置项用于个性化配置应用过渡效果属性的默认值。

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧