nuxt框架如何安装（Nuxt2.0正式发布支持）(1)

首先，我们先来看自 Nuxt 创建以来的一些统计数据：

Google Analytics

GitHub

Twitter

NPM

新版本的主要变化：

支持 Webpack 4

光是这一改进就值得专门写一篇文章进行介绍：

其他变化：

迁移提示：用户不需要修改项目中的任何一行代码，升级到 Nuxt 2 后，一切都将神奇般地自动帮你迁移完毕。

不再需要 vendors

Nuxt 2 仍然存在 vendors 块，但会自动处理它，而且效率更高。从这个版本开始，不再使用 CommonsChunkPlugin，所以用户不必在项目中显式定义 vendors。Nuxt 会自动将核心软件包（vue、vue-router、babel-runtime 等）添加到指定的 Cache Group 中，这有助 Webpack 以最有效的方式拆分代码。

迁移提示：从 nuxt.config.js 中删除 vendors。如果你的项目中包含了 vendors，可以安全地删除它们。如果你是模块作者，可以保留 this.addVendor() 为旧版本提供支持。下一版本可能会显示弃用警告。

完全控制块拆分

Nuxt 尝试提供开箱即用的最有效的代码拆分功能，不过，现在用户可以通过 build.splitChunks 选项来完全控制代码拆分，并可以选择性地禁用路由的异步块。

重大变更：默认情况下，Nuxt 不再拆分布局块。它们将与主入口点一起加载，就像 Nuxt Core、Plugins、Middleware 和 Store 一样。用户可以通过 build.splitChunks.layouts: true 来启用布局拆分。另外，为了更好地控制 Webpack 块拆分，可以使用 build.optimization.splitChunks 选项。

重大变更：对于生产版本的构建，不再使用文件名作为块名称的一部分（/_nuxt/pages/foo/bar.[hash].js 变成了 [hash.js]）。用户可以使用 build.optimization.splitChunks.name：true 强制恢复启用文件名称（如果未指定，在 dev 和 --analyze 模式下仍然会启用文件名称）。

重大变更：为了减少异步请求，Webpack 默认不拆分运行时（manifest）块，并将其移到主块中。用户可以通过 build.optimization.runtimeChunk：true 来启用运行时拆分。

注意：Nuxt 的默认设置是以一些最佳实践为基础，并基于实际项目的基准测试进行了优化。建议用户在每次做出更改后使用 nuxt build --analyze 分析 bundle。

迁移提示：保持默认设置。对你的实际项目进行基准测试，然后根据你的需要精心定制配置选项。

Vue Loader 15 和 mini-css-extract-plugin**

vue-loader（https://vue-loader.vuejs.org/en/）可以将.vue 文件解析为可运行的 JS/CSS 和 HTML。Vue-Loader 15 使用完全不同的新架构进行了重写，可以将主 Webpack 配置中定义的任何规则应用于 *.vue 文件中的语言块。

对于 CSS 提取，使用了一个新的插件 mini-css-extract-plugin，它支持按需加载 CSS 和 SourceMaps（CSS 拆分），并且是基于 Webpack v4 的新功能（模块类型）而构建。

因为这两个插件都是新的，所以预计在最终发布 2.0.0 版本之前，可能会出现一些不一致。这两个插件已经在不同场景中进行了全面测试，它们表现得非常好！

Nuxt 和 ES module

现在用户可以通过 std/esm（https://github.com/standard-things/esm）在 nuxt.config.js 中导入和导出 Middleware 和模块中。std/esm 是一个快速、生产就绪、零依赖的软件包，用于在 Node 6 中启用 ES 模块。

CLI 改进

开发者需要优雅的开发经验来开发出色的软件，于是 Nuxt 团队重新设计了很多有关 CLI 的东西。

在使用 nuxt dev 时，即使 CLI 显示 Nuxt 已准备就绪，用户仍然可能感觉到构建延迟。这是因为运行了两次 Webpack。一次是为客户端，一次是为 SSR 捆绑，但第二次运行被隐藏起来。现在构建被并行化，同时开发了 WebpackBar（https://github.com/nuxt/webpackbar），可以查看构建进度，还有其他很多功能。

现在，默认情况下隐藏所有调试消息（可以通过设置环境变量 DEBUG = nuxt:* 来启用），同时为构建器和生成器更智能、更好地显示消息。

用户经常要求 Nuxt 支持测试和 CI（持续集成）环境。Nuxt 2 将自动检测 CI 和测试环境，并切换到 minimalCLI 特殊模式，在该模式下包含较少的打印消息。

移除 Nuxt 1.0 中弃用的特性实验性的多线程编译器

这个特性将在 Webpack 5 中正式发布，不过用户现在可以通过 options.build.cache: true 来启用 cache-loader 和 Babel 缓存，以及通过 options.build.parallel: true 来启用 thread-loader。

SPA 改进

Nuxt.js 是 Vue.js 开发人员的通用框架，它既可以用于全局环境（与服务器端渲染一起），也可以用于客户端（单页应用程序，SPA）。Nuxt 重新设计了与 SPA 有关的一些重要方面。

SPA 最重要的组件之一是页面加载指示器。Nuxt 团队对其进行了重新设计，如果出现任何问题，就会进入错误状态，并在大约 2 秒后自适应地显示在 DOM 中。如果 SPA 应用程序加载足够快，可以避免不必要的屏幕闪烁。还添加了 aria 标签，帮助屏幕阅读器和搜索引擎正确检测启动画面。

出于 SEO 方面的原因以及支持 HTTP2 推送，SPA 模式使用特殊的 Meta 渲染器将 nuxt.config.js 中定义的所有元标记添加到页眉中。同时还为 SPA 模式添加了 options.render.bundleRenderer.shouldPrefetch 和 options.render.bundleRenderer.shouldPreload。

重大变更：默认情况下禁用 shouldPrefetch。很多用户反应存在不必要的页面块预取，尤其是在中型项目中。此外，为了方便调试，非生产模式下默认禁用所有不必要的资源提示。

create-nuxt-app

create-nuxt-app 是 Nuxt 官方的脚手架工具，用于生成各种模板，如项目启动模板、Express 模板等。有了 create-nuxt-app，用户可以选择与服务器端框架（如 Express、Koa、Adonis 等）集成，或者与 UI 框架（如 Vuetify、Bootstrap、Tailwind 等）集成，或者也可以使用 axios 模块。

现在你可以更快地创建一个 Nuxt 新项目了。

迁移指南

用户可以通过 yarn add nuxt@^2.0.0 或 npm install nuxt@^2.0.0 进行升级。下面是完整的迁移步骤指南：

参考链接

,