Vue 自 2014 年以来一直都是最流行的 JavaScript 框架。Vue 的设计目标之一就是便于与其他类库和现存项目搭配使用。Vue 完全可以为复杂的单页应用（SPA）提供强大的支持。

不过，你是否在构建 Vue 应用时对 Vue 的快速上手感到困惑呢？换个说法，你曾遇到过 Vue SPA 的 SEO 相关问题么？

那就是 Nuxt 排上用场的时候了！！Nuxt 将让你对自己对 Vue 的掌握更加自信。

为何选择 Nuxt ？

Nuxt 提供了一个强大的模块化的体系结果。这将简化并加速研发过程。而且你也并不需要考虑路由、组件到底应该放哪儿。入门项目应该足够让你上手开发了。入门项目结构如下所示：

入门项目

资源

assets 目录是存放无需编译资源的地方，就像样式，图片，或字体。

组件

components 目录是存放所有页面或布局组件的地方。Nuxt 提供了 自动导入功能，所以无需在页面或布局中导入通用组件。

布局

layouts 目录存放所有无需动态变化的布局。举个栗子，页眉，页脚以及侧边栏将会在每个页面中按照相同的形式展示，因此称之为 布局。

中间件

middleware 目录存放在页面或布局渲染完成之前定义好的所有函数。像检查权限，用户代理等功能可以放在这里。

页面

pages 目录是存放视图和路由的地方。Nuxt 会读取其中所有的 .vue 文件，并为其自动创建路由配置。

插件

plugins 目录是存放 Vue 插件 的地方，插件可以注入函数或常量。

静态资源

static 目录是存放不易更改的文件的地方。所有在里边的文件将由 Nuxt 提供服务，并可以通过项目根目录 URL 进行访问。在示例中，robots.txt 将可以通过 host/robots.txt 访问到。

存储

store 目录是存放 Vuex 状态存储 文件的地方。

nuxt.config

Nuxt 默认配置足以覆盖大多数场景。

第二个「原因」，是Nuxt使SEO（Search Engine Optimization 搜索引擎优化）更加容易。Nuxt使用服务器端渲染(SSR)。SSR是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记「混合」为客户端上完全交互的应用程序。SSR在应用程序中生成预定义的meta标签可以被智能搜索引擎捕捉到。Nuxt允许您选择使用Vue实例中的 head 方法为每个页面预先定义meta标签。

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ]
  }
}
</script>

在每个页面和布局中，如Vue组件，您都必须定义Vue实例，但区别在于 head 方法可用于在

部分设置HTML元素。在 home.vue 上面，您可以使用您想要的属性设置标题标签和meta标签。

第三个「原因」是我上面在 pages 目录「智能路由」中所述。在Vue中，您必须逐一定义自己的路由。在Nuxt中，您只需在 pages 目录中放置 .vue 文件，然后Nuxt即可为您做好准备工作。

Nuxt自动创建路由

正如您所看到的，通过在页面内设置 products 目录，让您可以在 products 目录的 index.vue 内部访问一条 /products 路由。对于动态路由，我们只需要以 _ 开始命名 .vue 文件。在上面的例子中, _slug.vue 会让您在该路由中接收动态参数（slug）。当我们访问 /products/something-good 或 /products/something-better 会让Nuxt读取 _slug.vue 时,将 something good 或 something better 作为参数来执行。

总结

我已使用 Nuxt 一年多了，现在已经喜欢上了它。它是如此简单且入门项目就已足够开发者上手开发。如果你只需要 SPA 并且不需要复杂的 SEO 支持，那么使用 Vue 就够了。不过如果你想构建一些复杂的应用，则可以使用 Nuxt 来增强 Vue 应用的能力。您还可以在如下链接中查看更多有关 Nuxt 的信息：

nuxtjs.org/

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://medium.com/@kevinasurjadi/power-...

译文地址：https://learnku.com/vuejs/t/52665