Nuxt.js 服务器端 Javascript 问题，框架混乱答案

【问题标题】：Nuxt.js server side Javascript issue, framework confusionNuxt.js 服务器端 Javascript 问题，框架混乱
【发布时间】：2020-10-07 19:18:35
【问题描述】：

我和一个合作伙伴正在为一个学校项目做网站，我们决定使用 Vue.js 和 Nuxt.js 作为前端框架，并使用 Vuesax 作为 UI 框架。直到最近，我们俩都没有使用这些框架或坦率地说 Web 开发的经验。我们在尝试创建配置文件下拉菜单时遇到了第一个主要问题，当您单击配置文件头像时，菜单的项目变得可见，但是当尝试使用事件监听器时，我们实现了 Nuxt.js（基于on node) 用于通用 javascript 而不是严格的客户端，所以当我们使用“document.getElementId”进行事件处理时，它表示它没有定义。（无 DOM）

我们真的不知道从这里做什么 - 找到一个新的框架或插件/扩展 - 我们想知道我们是否可以得到一些见解。我们希望能够纯粹使用 Javascript 来处理前端事件。展望未来，我们还想从数据库中获取信息（目前在 MySQL 中，但可能会因反馈而改变），我们正在考虑使用 Spring Boot 作为我们的后端框架，因为它允许我们处理请求，在 Java 中创建 servlet(我们最舒适的语言）并且还有 Tomcat。

我们做了很多研究，咨询了很多网站和熟人，但有时很难找到与如此具体的事物相关的东西，在这种情况下是我们的项目。我们也很难找到一个具有凝聚力和相互兼容的框架系统。我们非常愿意学习，因此我们非常感谢任何见解、反馈或建议！

【问题讨论】：

Nuxt 具有诸如client-only 之类的组件，这些组件只能用于在客户端执行代码。话虽如此，通常使用 Vue，您通常不会直接与 DOM 交互。你的问题太宽泛了，因为它可能是很多问题。而是尝试发布您尝试执行的代码以及执行它的位置/时间。
另外window 和document 应该在生命周期钩子nuxtjs.org/guides/concepts/… 中可用
您将getElementId raw DOM 与框架一起使用并且不知道您是否正确地执行此操作，这强烈表明您没有按照框架的预期方式进行操作。考虑先解决这个问题。 适用于服务器端 javascript 而不是严格的客户端 - 不，它适用于通用 JS，即它在服务器端和客户端都呈现。对有条件的仅限客户端和服务器的代码使用守卫 - ifs 和生命周期。例如。 mount 在服务器上被忽略。见nuxtjs.org/guides/concepts/nuxt-lifecycle。你对 Nuxt 的动机是什么？你可能需要也可能不需要。
@AlexanderStaroselsky 感谢您的回复！我下载了“仅限客户端”组件并使用它，但是当我再次尝试时，我得到了同样的错误；我已将图像粘贴到我原来的问题中
@EstusFlask 那是我的错误，抱歉措辞不好！是的，它是通用的 js，但我们认为是服务器端渲染在进行了一些搜索后导致了问题（尽管可能是错误的）。我们使用 Nuxt 的动机只是为了让我们可以通过几个步骤轻松地创建和运行一个项目，其中已经为我们安装了所有依赖项和文件； Vuesax 文档还建议我们一起使用这些框架。作为初学者，这对我们来说似乎是一个快速、简单且不错的选择，但除此之外，我们没有其他理由使用它

标签： javascript spring-boot vue.js nuxt.js web-development-server

【解决方案1】：

从图片中，您尝试在 nuxt 中执行 dom 操作，并且未定义窗口和文档。

要做你想做的事，你必须像这样尝试。

<template>
  // @click is the event listener to change the state
  <button @click="mobileNavOpen = !mobileNavOpen">Toggle btn</button>
  // bind the show class conditonally according to mobileNaveOpen state and add the display state to the show class.
  <div :class="{show : mobileNavOpen}">
    <ul class="navbar-nav align-items-center">
      <li class="nav-item active">
        <nuxt-link class="nav-link" to="/">
          Home
        </nuxt-link>
      </li>
      <li class="nav-item">
        <nuxt-link class="nav-link" to="/about">
          About
       </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        mobileNavOpen: false,
      }
    },
    methods: {
      closeMobileNavbar() {
        this.mobileNavOpen = false
      }
    }
  }
</script>

【讨论】：