vue.js - 'Nuxtjs SPA mode'和 'Vuejs without Nuxtjs'的区别

我写了一个简单的Nuxtjs项目。根据我从Nuxtjs文档中学到的知识以及测试过程中的经验，我无法理解“Nuxtjs SPA模式”和“没有Nuxtjs的Vuejs”之间的区别

例如在以下页面中:

// pages/index.vue

<template>
    <div class="userip">{{userip}}</div>
</template>

<script>
    export default {
        data() {
           return {
               userip: 'in process ...'
           }
        },

        async asyncData() {
            let res = await fetch("https://api6.ipify.org?format=json")
            .then(response => response.json());

            return {userip: res.ip}
        }
    }
</script>

如果我运行以下命令:

cmd: nuxt generate

虽然Nuxtjs是在通用模式下配置的，但它为我提供了预渲染的文件，该文件在用户的浏览器上也具有SPA功能。例如，构建后的文件如下所示:

// dist/index.html

<body>
  ...
    <div class="userip">14.182.108.22</div>
  ...
</body>

当我跑步时

cmd: nuxt start

要么

cmd: nuxt dev

而不生成预渲染的文件，那么它将生成一个真实的SSR，该SSR会在每个请求上都被渲染。现在，如果我运行以下命令:

cmd: nuxt generate

在Nuxtjs的SPA模式下，它为我提供了一些未渲染的SPA文件(例如甚至不使用Nuxtjs即可构建Vuejs项目)。以下是示例输出:

// dist/index.html

<body>
  ...
    <div id="__nuxt"><style>#nuxt-loading { ... } ...</style></div>
  ...
</body>

甚至不包含内部渲染的组件。

在实时模式下(不生成预渲染的文件)，

cmd: nuxt start

要么

cmd: nuxt dev

它将未渲染的文件提供给客户端。

那么，使用Nuxtjs的SPA模式的Vuejs项目和根本不使用Nuxtjs的Vuejs项目之间有什么区别？

最佳答案

使用Nuxt时，SSR对我而言只是一个优势。

在SPA模式下使用Nuxt时，还剩下一些东西:

您不必关心路由，只需在pages文件夹

中创建组件

使用asyncData或fetch方法将数据加载到组件中的简便方法

轻松设置Vuex，包括自动命名空间的存储模块

通常，它提供了一种结构化的方式来开发Vue.js应用程序。

nuxtjs

vue.js - 'Nuxtjs SPA mode'和 'Vuejs without Nuxtjs'的区别