“Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”的区别
Posted
技术标签:
【中文标题】“Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”的区别【英文标题】：Differences of 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs' 【发布时间】：2020-05-05 14:28:05 【问题描述】：我写了一个简单的 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
在不生成预渲染文件的情况下，它会生成一个真正的 s-s-r，在每个请求上都会渲染。现在，如果我运行以下命令：
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 项目有什么区别？
【问题讨论】：
【参考方案1】：使用 Nuxt 时，s-s-r 对我来说只是优势之一。
当你在 SPA 模式下使用 Nuxt 时，还剩下一些事情：
您不必关心路由，只需在pages 文件夹中创建组件
使用asyncData 或fetch 方法更轻松地将数据加载到组件中
轻松设置 Vuex，包括自动命名空间存储模块
一般来说，它提供了一种更结构化的方式来开发 Vue.js 应用程序。
【讨论】：
【参考方案2】：Nuxt 可用于通用应用 (s-s-r)、静态生成的应用和单页应用。
如上所述，Nuxt 内置了各种优点，例如 Vuex、Vue Meta 和 Vue Router。它还支持您的文件结构，并允许您使用 nuxt 配置文件中的模块和插件轻松配置项目。对于 SPA，还可以选择使用 Nuxt 作为中间件。
https://nuxtjs.org/guide/
【讨论】：
【参考方案3】：Nuxt js 将比 vuejs 具有基本优势，因为它是一个使用 vuejs 构建的框架，其中 Vue.js 是一个开源模型-视图-视图模型 javascript 框架，仅用于构建用户界面和单页应用程序。
Nuxt.js 是一个基于 Vue.js 构建的前端框架，它提供了强大的开发功能，例如服务器端渲染、自动生成的路由、改进的元标记管理和 SEO 改进。
基本区别可以是：
Nuxt js 自己为您创建路由，只需在 pages 文件夹中创建组件即可。声明路由的这种自动化也可以在 vuejs 中完成，但您肯定需要为此编写代码。
结构化项目：vuejs 最大的缺点之一（可以这么说）是，它没有任何 nuxtjs 定义的标准化文件夹结构。
轻松设置路由之间的转换（在资产文件夹中的 main.css 文件中声明 css）。
Vuex 的简单设置。
【讨论】：
【参考方案4】：事实上，Nuxt js 对 s-s-r 有好处。 Vuejs 没有 s-s-r 能力，难以实现。 s-s-r 表示服务器端渲染。当它使用 s-s-r 时，你的请求会被调用到服务器并编译并最终发送到页面！
我们可能无法完全理解。但是为了测试和理解，首先在你的页面中使用data()，运行项目后，在你的站点上查看源代码，会注意到你的站点只加载了页眉和页脚的内容和内容您的网页是隐藏的。 如果用这种方式创建项目，最好还是用Vuejs做！！！正确的方法是使用asyncData或Fetch上这些页面向您展示了 s-s-r 的全部含义。使用 asyncData 后，像以前一样比较您的输出！ 另外，如果要使用asyncData，项目类型必须是
通用
祝你好运
【讨论】：
以上是关于“Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”的区别的主要内容，如果未能解决你的问题，请参考以下文章
第三十一节：扫盲并发和并行同步和异步进程和线程阻塞和非阻塞响应和吞吐等
shell中$()和 ` `${}${!}${#}$[] 和$(())，[ ] 和(( ))和 [[ ]]
Java基础8---面向对象代码块和继承和this和super和重写和重载和final
Java基础8---面向对象代码块和继承和this和super和重写和重载和final
JS中some()和every()和join()和concat()和pop(),push(),shift(),unshfit()和map()和filter()