Различия в режимах «Nuxt js SPA» и «Vuejs без Nuxt js» - PullRequest
Новая
       77

Различия в режимах «Nuxt js SPA» и «Vuejs без Nuxt js»

5 голосов
/ 19 января 2020

Я пишу простой проект Nuxt js. Исходя из того, что я узнал из документов Nuxt js и своего опыта при его тестировании, я не смог понять разницу между «Nuxt js SPA mode» и «Vuejs без Nuxt js»

Например, на следующей странице: 

// 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

, когда Nuxt js настроен в универсальном режиме, он дает мне предварительно обработанные файлы это также имеет функции SPA в браузере пользователя. Например, файл после сборки выглядит следующим образом: 

// dist/index.html

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

и когда я запускаю 

cmd: nuxt start

или 

cmd: nuxt dev

без создания предварительно обработанных файлов, затем он создает реальный SSR, который отображается при каждом запросе. И теперь, если я запускаю следующее: 

cmd: nuxt generate

в режиме SPA Nuxt js, это дает мне несколько не обработанных файлов SPA (например, создание проекта Vuejs без использования Nuxt js ). Ниже приведен пример вывода: 

// dist/index.html

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

, который даже не содержит компонентов, отображаемых внутри.

И в режиме реального времени (без генерации предварительно обработанных файлов), 

cmd: nuxt start

или 

cmd: nuxt dev

, который подает клиенту неопознанные файлы.

Итак, в чем разница между проектом Vuejs, в котором используется режим SPA Nuxt js, и одним который вообще не использует Nuxt js?

Ответы [ 2 ]

2 голосов
/ 19 января 2020

SSR - это только одно преимущество для меня при использовании Nuxt.

При использовании Nuxt в режиме SPA еще есть несколько вещей:

  • Вам не нужно позаботьтесь о маршрутизации, просто создав компоненты в папке pages
  • Упрощенный способ загрузки данных в ваши компоненты с помощью asyncData или fetch методов
  • Простая настройка Vuex, включая модули хранения с автоматическим распределением имен

В целом он обеспечивает более структурированный способ разработки Vue. js приложений.

0 голосов
/ 14 апреля 2020

Nuxt может использоваться универсальными приложениями (SSR), приложениями, генерируемыми c, и одностраничными приложениями.

Как уже упоминалось выше, Nuxt поставляется со всеми видами преимуществ, такими как Vuex, Vue Мета и Vue Маршрутизатор. Он также создает структуру вашего файла и позволяет вам легко конфигурировать ваш проект с модулями и плагинами в файле конфигурации nuxt. Для SPA есть также возможность использования Nuxt в качестве промежуточного программного обеспечения.

https://nuxtjs.org/guide/

...