什么是Nuxt.js？深入了解此直观Vue框架

Nuxt.js是目前最直观的Vue框架。它将Vue.js的强大功能与服务器端渲染功能相结合，使其更加强大。你可以建立一个完整的Vue.js客户端渲染应用程序，一个全面的静态生成的应用程序，以及一个单片机应用程序。

Nuxt.js解决了构建Vue.js项目的问题，因为它带有企业级的前端开发架构。Nuxt.js的功能已经使用行业标准进行结构化，以创建企业应用程序。

本指南将探讨Nuxt.js，你可以用它构建什么，以及它是如何从内到外工作的。

1. 什么是Nuxt.js？
2. Nuxt.js的用途是什么？
3. Nuxt.js是如何工作的？
4. Nuxt.js的优势
5. 如何创建Nuxt.js应用程序

什么是Nuxt.js？

Nuxt.js是一个建立在Vue.js上的服务器端渲染框架。它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。它还有助于使用行业标准架构来构造Vue.js应用程序，以构建简单或企业级的Vue.js应用程序。

Nuxt.js的官方标志。(图片来源：Medium)

Nuxt.js的用途是什么？

Nuxt.js允许你创建许多不同类型的应用程序。下面是用Nuxt.js制作的三个最流行的应用程序。

静态生成的页面

这种类型的网站不需要任何外部内容来源–内容已经嵌入HTML中。这类网站的例子包括作品集、演示和教程网站。

单页应用程序（SPA）

这种前端开发方式从外部API获取动态内容并在客户端显示。大多数JavaScript框架，如React.js、Vue.js、Angular和Ember.js都是单页应用框架。

更重要的是，SPA的路由系统是通过HTML 5历史API或路由的位置哈希实现的，这让开发者有能力在不刷新整个页面的情况下修改网站的URL。

通用应用程序

“通用应用程序” 是一个术语，描述了使用服务器端渲染的方法，在客户端浏览器上完全渲染页面之前，在服务器上获取客户端数据。

服务器端渲染（SSR）是Vue.js中的一个众所周知的问题，因为它涉及到繁琐的配置，要把它做好。

Nuxt.js解决了Vue.js中的SSR问题，这对搜索引擎优化（SEO）很有帮助。Nuxt.js甚至可以扩展Universal应用程序，以适应一个成熟的单片机应用程序，其中前端和后端共享一个代码库。

Nuxt.js是如何工作的？

当用户访问一个网站时，Nuxt.js的工作方式与服务器端框架的工作方式相同。如果启用了服务器端渲染，每次用户请求页面时都会在服务器上进行渲染，因此需要服务器能够在每次请求时提供页面。另外，如果启用了客户端渲染，它使用JavaScript在浏览器中渲染页面的内容。

这些是Nuxt.js中使用的主要动作和方法：

• nuxtServerInit（动作）：这是第一个生命周期钩子，如果启用了Vuex存储，就会在服务器端调用。它是一个Vuex动作，只在服务器端调用，以预先填充商店，最后，它可以用来调度Vuex商店的其他动作。
• validate() （函数）：validate方法在渲染页面组件之前被调用。它对于验证页面组件的动态参数很有用。
• asyncData()方法用于获取数据并在服务器端渲染数据，而fetch()方法则用于在渲染页面前填充存储。

例如，当Nuxt.js网站收到初始页面访问时，它会呼出 nuxtServerInit 动作来更新Vuex状态（如果在Vuex商店中定义）。否则，如果 nuxtServerInit 没有被定义，它就会转到另一个阶段。

接下来，它按照这个顺序查找中间件。首先，它检查 nuxt.config.js 文件中是否有任何全局中间件。如果它被定义，它将在检查 layout 页面的中间件之前被执行。最后，它将执行单个页面的中间件，包括页面的子件。

在按顺序执行所有的中间件后，它将检查路由是否是动态的，并执行创建和验证的 validate() 方法。

接下来，它调用页面的 asyncData() 方法，在服务器端获取和渲染数据，然后再调用 fetch() 方法，在客户端填充Vuex商店。

到这一步，页面应该有所有的数据和内容来显示一个合适的网页。然后，该页面由Nuxt.js引擎渲染并显示给访问者，完成了整个过程。

这个流程图说明了渲染一个页面的所有步骤：

Nuxt.js生命周期钩子的概述。(来源：Nuxt网站)

无论你使用哪种工具，当你了解该工具在引擎盖下的工作原理时，你总是会感到更加自信。通过以上对Nuxt.js在引擎盖下的工作原理的解释，你就会很容易理解。让我们探讨一下在你的下一个项目中使用Nuxt.js的好处。

Nuxt.js的优势

接下来，让我们谈谈Nuxt.js框架的好处，以及为什么它最近变得如此受欢迎。

无忧创建通用的应用程序

Nuxt.js使创建服务器端渲染应用程序变得非常容易。如果你曾经试图用Vue.js开发一个服务器端渲染的应用程序，你可能会因为服务器端和客户端的无数配置选项而跳过困难的障碍。

SSR功能已经内置于Nuxt.js中，并且很容易使用。它可以访问组件上的 isServer 和 isClient 属性，以决定你是在客户端还是在服务器端渲染东西。

它还提供了 asyncData 方法，专门用于在你的页面组件的服务器端获取和渲染数据。

静态渲染Vue应用程序的好处

静态生成的网站在网络行业中正在崛起，通过一个 nuxt generate 命令，你可以生成一个静态版本的网站，所有的HTML都有相应的路由。

nuxt generate 命令的工作原理与启用了所有SSR功能的通用应用程序方法完全一样，但对于静态生成的网站来说。

在Nuxt.js中，静态生成的网站就像建立一个强大的通用应用程序，不需要服务器来驱动SSR功能。

获得自动代码拆分

Nuxt.js在性能上非常快的原因之一是代码拆分功能，一个路由被赋予一个单一的JavaScript文件，其中只有运行该路由所需的代码，因此，减少你的应用程序的大小。

这个代码拆分功能使用了Webpack的配置，该配置在生成网站的静态版本时已经内置了。

热重载

热重载是为了解决软件开发中耗时的更改-刷新方法而添加的一项伟大功能。

它被配置为在你改变根目录中的任何文件时自动更新开发服务器。

在开发和处理 .vue 文件时，它使用Webpack配置来检查变化，并为你编译一切。这种方法节省了开发人员的时间，并鼓励加快应用开发。

获得ES6/ES7编译

Nuxt.js预置了Webpack和Babel，用于翻译和编译最新的JavaScript版本，如ES6和ES7，使其可以在旧的浏览器上运行。

Babel被配置为将所有的 .vue 文件和脚本标签内的ES6代码编译成可以在所有浏览器上运行的JavaScript。

这个功能解决了手动创建浏览器兼容的应用程序和从头开始设置配置的战斗。

如何创建Nuxt.js应用程序

本节将探讨如何创建一个Nuxt.js应用程序。在我们深入研究之前，让我们先来探讨一下开发Nuxt.js应用程序的一些关键概念。

创建Nuxt.js应用程序

创建一个新的项目很简单，直奔主题。你可以用官方文档中列出的不同方法来创建一个项目，但最喜欢和推荐的方法是使用CLI。

要使用CLI创建一个新的应用程序，请确保你已经安装了npx（npx在你安装yarn或npm 5.2.0以上版本时是默认安装的）。

接下来，在你想放置项目的文件夹中键入以下命令：

npx create-nuxt-app 
cd 
npm run dev

确保将project-name>替换为你的实际项目名称。

了解Nuxt.js的文件夹结构

当你使用官方文档中的任何一种不同的安装方法来搭建一个新的应用程序时，你会看到CLI生成的各种文件和文件夹。这些文件和文件夹是至关重要的，要求一些文件夹保持不变，不需要额外的配置。

我们将查看文件夹结构，讨论每个文件和文件夹，并了解其重要性。

新创建的Nuxt.js文件夹结构。

1. .nuxt

.nuxt目录是隐藏的，在你启动你的开发服务器时生成，它被称为 build directory。该目录包含运行 npm run build 命令时生成的文件或工件。

你可以修改这个目录中的文件，但只能用于调试目的，因为一旦你运行 dev 或 build 命令，这些文件将再次自动生成。

2. assets

assets文件夹包含所有未编译的资产，如图片、字体、SASS文件和Stylus。在渲染过程中，Webpack会编译任何包含在这个目录中的文件。

3. Components

Components目录类似于Vue.js中的组件目录，你所有的Vue组件都存放在这里。组件是构成你的页面的不同部分的文件，也可以重复使用并导入到你的页面、布局和其他组件。

4. Layouts

布局文件夹存储了你的应用程序的布局，在为认证用户或访客用户分离你的应用程序的不同结构时非常有用。

你可以创建许多布局来对应你的应用程序的结构。有时，你可能希望你的网站上的一些页面有不同的边栏、页眉、页脚等。这些以及更多的东西都是使用存储在layouts文件夹中的布局文件来结构化的。

5. Middleware

中间件是在渲染一个页面或一组页面（布局）之前可以执行的自定义函数，它们可以被定义并存储在Nuxt.js的中间件文件夹中。

中间件在创建会员制网站时非常方便，如果你想限制某些页面的访问，你可以设置中间件来检查用户是否已经登录。

在Nuxt.js中，中间件的工作原理类似于任何后台编程框架的中间件，如ExpressJS、Laravel等。它有三种不同类型的中间件，即：命名的、匿名的和路由器的中间件。

6. Pages

pages 目录是Nuxt.js路由系统的基石，因为它读取该目录下的所有 .vue 文件并自动创建路由器配置。

pages 目录包含了你的应用视图和路由，每一个页面组件也是一个标准的Vue组件。

不过，Nuxt.js还是把它当作一个路由，通过添加特殊的属性和功能，使你的通用应用程序的开发尽可能的简单。

7. Plugins

plugins 目录包含你想在实例化根Vue.js应用程序之前执行的JavaScript代码。这里是添加Vue插件和注入函数或常量的地方。

在Nuxt.js中，你不必使用 Vue.use() 函数，只需在plugins文件夹中创建一个新文件，并使用nuxt.config.js文件将你的Vue插件注入Vue实例中。

8. Static

static文件夹包含了你的项目中所有的静态文件，这些文件很可能不会改变，或者不需要对其进行任何编译就应该被渲染。

所有包含在静态目录中的文件将自动由Nuxt.js提供服务，并通过你的项目根URL访问。

这个目录对于诸如favicon、robots.txt等文件来说是非常好的。

9. Store

Store目录包含了你所有的Vuex商店文件，默认情况下，它被分割成模块。

Vuex商店开箱即用，但默认是禁用的。你需要通过在商店目录下创建一个 index.js 文件来激活商店。

在创建和管理一个企业项目时，Vuex商店是必要的。这就是为什么Nuxt.js预置了Vuex商店，并为适应企业级应用开发进行了配置。

Nuxt.js页面和路由系统

Nuxt.js使路由系统像在 pages 目录中创建目录和文件一样简单。它根据该目录的文件和文件夹结构，自动生成一个路由文件。

例如，如果你在pages目录下有一个 about.vue 文件，它将自动转换路由，然后你可以在浏览器上访问该路由，看到 “About” 页面的内容。

这个路由系统还允许你只通过创建文件和文件夹来定义三种不同的路由。让我们更详细地探讨一下这些路由类型。

1. 基本路由

基本路由是那些不需要任何额外配置就能工作的路由。这是最简单的路由类型，可以像 /about, /contact 等那样简单。

要创建一个基本的路由系统，你可以像下面这样构造你的页面目录：

pages/
--| services.vue
--| contact.vue
--| index.vue

Nuxt.js会使用你在pages目录中添加的文件自动生成一个路由器文件：

router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: ‘services',
path: '/services',
component: 'pages/services'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
]
}

现在，我们所有的文件都结构整齐，并自动进行路由。

2. 嵌套式路由

嵌套路由是在一个父路由中创建的路由。嵌套路由被用来创建多层次的深度路由。

要创建嵌套路由，需要创建一个父文件夹，将所有路由文件放在该文件夹中。

让我们尝试一下创建一个嵌套路由：

pages/
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| contact.vue
--| index.vue

在上面的文件夹结构中，我们创建了一个与 dashboard 同名的新文件和文件夹，接下来，我们添加了 user.vue 和 settings.vue 文件作为 dashboard 文件夹的子文件夹。

这个简单的文件夹结构将生成一个类似于下面的路由的路由器：

router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'services',
path: '/services',
component: 'pages/services'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
{
name: 'dashboard',
path: '/dashboard',
component: 'pages/dashboard.vue',
children: [
{
name: 'dashboard-user',
path: '/dashboard/user',
component: 'pages/dashboard/user.vue'
},
{
name: 'dashboard-settings',
path: '/dashboard/settings',
component: 'pages/dashboard/settings.vue'
}
]
}
]
}

在Vue.js中创建嵌套路由有点麻烦，特别是如果你必须创建大量的路由，就像你在上面的代码示例中看到的那样，但Nuxt.js通过只在一个嵌套文件夹中创建Vue文件，使其变得简单而容易。

3. 动态路由

动态路由是用未知的路由创建的，因为它依赖于API调用，或者你不想重复创建页面。这些路由是由一个变量定义的，这个变量可以是名称、数字或从应用程序的客户端数据中检索的ID。

例如，在建立一个新闻应用时，这很有用，因为你不知道用户要点击阅读的帖子的ID或slug。但有了动态路由，你可以检索帖子的ID/lug，并以ID/lug呈现正确的帖子。

要创建一个动态路由，你要在.vue文件或目录名称中添加一个下划线。你可以把文件或目录命名为你选择的任何名字，但必须附加一个下划线以使其成为动态。

例如，如果你在pages目录下定义了一个 _slug.vue 文件，你可以使用 params.slug 对象来访问这个值。我们将用一个例子来演示如何创建一个动态路由：

pages/
--|user/
-----| index.vue
-----| about.vue
-----| _routeName
-------| index.vue
-------| info.vue
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| _id.vue
--| contact.vue
--| index.vue

在 _id 和 _routeName 中附加下划线，将为页面创建一个带有ID参数的动态路由，以及一个带有上述子路由的字符串参数的父路由。这个页面结构将在文件中生成一个具有以下路由的路由器：

   {
name: 'work',
path: '/work',
component: 'pages/work'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
{
name: 'id',
path: '/:id',
component: 'pages/_id.vue'
}
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-about',
path: '/user/about',
component: 'pages/user/about.vue'
},
{
name: 'user-routeName',
path: '/user/:routeName',
component: 'pages/user/_routeName/index.vue'
},
{
name: 'user-routeName-info',
path: '/user/:routeName/info',
component: 'pages/user/route.vue'
},
{
name: 'dashboard',
path: '/dashboard',
component: 'pages/dashboard.vue',
children: [
{
name: 'dashboard-user',
path: '/dashboard/user',
component: 'pages/dashboard/user.vue'
},
{
name: 'dashboard-settings',
path: '/dashboard/settings',
component: 'pages/dashboard/settings.vue'
}
]
}
]
}

现在我们已经探索了Nuxt.js框架中内置的不同路由系统，让我们学习如何创建和管理Vuex商店。

在Nuxt.js中使用Vuex商店

Nuxt.js通过简化Vuex在构建企业项目时的处理方式，解决了一个主要的Vue结构问题。在创建一个新的应用程序时，商店文件夹会自动建立。

你可以通过在store文件夹内创建一个 index.js 文件来激活Vuex商店。有了这个简单的改进，Vuex商店现在是使用官方Vuex文档中概述的最佳实践来进行结构和修改的，这鼓励了大规模的应用开发。

你的 index.js 文件应该包含以下结构，以对应Nuxt.js如何结构你的Vuex商店。让我们来看看：

export const state = () => ({
})
export const getters = {
}
export const mutations = {
}
export const actions = {
}

Nuxt.js允许你在你的大型应用程序中使用按功能分割的方法。通过这种方法，你可以创建不同的Vuex存储文件来对应你的应用程序中的功能。例如，如果你的应用程序有用户、帖子和评论功能，你可以在你的商店目录中创建这些不同的文件，如 users.js, posts.js, 和 comments.js 。

这种方法使你很容易根据应用程序的功能访问特定的商店文件，将定位和更新数据的繁琐过程变成毫不费力的散步。

小结

Nuxt.js是一个非常流行的SSR和静态生成前端的Vue框架。它不仅解决了在Vue应用中配置和设置SSR的问题–它还通过遵守结构化和架构化大规模Vue应用的最佳实践，促进了企业应用的发展。

本指南探讨了你需要知道的关于Nuxt.js的一切，包括你可以用它构建什么。我们讨论了静态生成的页面、单页应用程序（SPA）和通用应用程序，以及如何使用Nuxt.js开发它们。

现在你已经看到了在你的下一个大型企业项目中选择Nuxt.js是多么容易和有益。请在评论区告诉我们，你将用这些新的超能力构建什么？

原文地址：https://www.wbolt.com/nuxt-js.html