小编kis*_*ssu的帖子

我只是使用（按照文档）创建一个新的 nuxt 应用程序：

yarn create nuxt-app appname\n

然后我切换到该目录并运行（按照文档）：

yarn dev\n

并得到以下错误：

 \xe2\x9c\x96 Nuxt Fatal Error                                                                                                                                                                                                \xe2\x94\x82\n   \xe2\x94\x82                                                                                                                                                                                                                     \xe2\x94\x82\n   \xe2\x94\x82   Error: @nuxt/components tried to access consola (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.                                                    \xe2\x94\x82\n   \xe2\x94\x82                                                                                                                                                                                                                     \xe2\x94\x82\n   \xe2\x94\x82   Required package: consola                                                                                                                                                                                         \xe2\x94\x82\n   \xe2\x94\x82   Required by: @nuxt/components@virtual:4eff43f3a560be194e6097f872c9d8ed0666b260b73fc7573cd09c38d17c2e2d252932f70636f4f4a6035fee79be6a699b4f9693d4a20ba4eb5c9b359f2413a9#npm:2.1.8 (via                             \xe2\x94\x82\n   \xe2\x94\x82   /home/ev/Documents/Projects/firebase-test/f-test/.yarn/__virtual__/@nuxt-components-virtual-7192147023/0/cache/@nuxt-components-npm-2.1.8-189d4bc3ff-b2ab70da20.zip/node_modules/@nuxt/components/dist/)          \xe2\x94\x82\n   \xe2\x94\x82                                                                                                                                                                                                                     \xe2\x94\x82\n   \xe2\x94\x82   Ancestor breaking the chain: nuxt@npm:2.15.7                                                                                                                                                                      \xe2\x94\x82\n   \xe2\x94\x82                                                                                                                                                                                                                     \xe2\x94\x82\n   \xe2\x94\x82                                                                                                                                                                                                                     \xe2\x94\x82\n   \xe2\x94\x82   Require …

我想将一个active类设置为此代码中的第一个按钮：

<button
  class='optional-red-outlined-btn'
  v-for="(item, index) in faq"
  :key="item._id"
  @click="btnIndex = index"
>
  {{ item.question }} 
</button>

这意味着当页面加载时，如果其中有 4 个按钮，那么第一个按钮应该有optional-red-outlined-btn类和active类，而其他的只有optional-red-outlined-btn类。

当然，但我想当点击其他按钮时删除第一个按钮的活动，我只将它用于一个按钮有活动样式 button:focus{ background-color: $optional-red; 颜色：#fff; 但我想在默认的第一个按钮有这种风格

我对 Nuxt 生态系统相当陌生。很棒的套餐，让我们的生活变得更加轻松。

我正在尝试添加sass到我的项目中。按照文档进行操作后，我的构建运行完美，但我的scss文件没有被编译。问题的一个例子：

请注意，它--thm-font被设置为$primaryTypography而不是来自 的实际值.scss。

我期待着看到--thm-font: 'Barlow', sans-serif。我假设sass没有被编译。需要注意的是，我并不是在寻找组件基础样式，而是试图找到一个main.scss导入组件、布局和许多其他样式的位置。

_变量.scss

// Base colors
$base: #ee464b;
$baseRgb: (238, 70, 75);
$black: #272839;
$blackRgb: (39, 40, 57);
$grey: #f4f4f8;

// Typography
$primaryTypography: 'Barlow', sans-serif;

@debug $primaryTypography; // -> this one outputs the correct value

:root {
  --thm-font: $primaryTypography;
  --thm-base: $base;
  --thm-base-rgb: $baseRgb;
  --thm-black: $black;
  --thm-black-rgb: $blackRgb;
  --thm-gray: $grey;
}

nuxt.config.js

export default {
  mode: …

我正在 Nuxt JS 项目中与 Axios 进行 HTTP 通信。当我发送请求时，页面顶部会出现一个栏。我怎样才能关闭它？

另外：如果我想编辑它而不是关闭它，该怎么办？（颜色、厚度）

我将使用从 **CDN ** 加载的包（ jspdf ）

这是CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

我已经将其加载到页面中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

我有一个按钮，当您单击它时，将调用下面的方法并生成一些 pdf。

mounted() {
  if (document.getElementById('myScript')) { return }
  let src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'
  let script = document.createElement('script')
  script.setAttribute('src', src)
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('id', 'myScript')
  document.head.appendChild(script)
}

但我收到一个错误

那么，我该如何修复这个错误呢？

src我正在尝试在 Nuxt 中显示资产文件夹中的图像，但即使HTML 中的值正确，它也无法工作。

这是代码的摘录。

<div v-for="(item, index) in items" :key="index">
  <div class="item-img">
   <img :src="`../assets/imgs/${item.img}`"/>
  </div>
</div>

上述路径是正确的，因为该组件位于与资产文件夹位于同一根级别的页面文件夹内。

我的数组中有图像文件名，如下所示：

data() {
  return {
    images: ['image0.jpg', 'image1.jpg'],
  ...
}

有一个异步函数正在调用 API 来获取一些项目。API 完成后，随机图像将添加到每个项目中。

async getMovies() {
  const data = axios.get `api_call_here`)
  const result = await data
  result.data.results.forEach((item) => {
    let randomImg = 
    this.images[Math.floor(Math.random() * 
    this.images.length)]
    item.img = randomImg
    this.items.push(item)
  })
},

我确信图像的路径是正确的并且它们存在于指定的文件夹中。我还知道该路径有效，因为我可以显示同一级别另一个组件内同一资产文件夹中的任何单个图像。

我想我已经尝试了属性内插值的每种组合src，但没有任何效果。

最后，当我在开发人员控制台中检查元素时，我可以看到元素本身的正确路径。更令人困惑的是，图像似乎占据了页面上的适当空间，但它们是空的（空白）。

我已经没有主意了。如果有人能帮助我找出问题所在，我将非常感激。

在 Nuxt2 中有连接检查器

https://nuxtjs.org/docs/concepts/context-helpers/#connection-checker

你可以执行以下操作this.$nuxt.isOffline

有没有办法用 Nuxt3 做到这一点？

我尝试查看useNuxt()其中是否有一些信息，但没有看到任何内容。

我的问题也在 Github 讨论中提出：https://github.com/nuxt/framework/discussions/4996

nuxt start + nuxt Preview 有区别吗？

在生产模式下使用 ssr nuxt 应用程序启动服务器是否正确： npm run build (nuxt build)
npm run start (nuxt start) ？
对我来说，这些文档有点令人困惑，https://v3.nuxtjs.org/api/commands/preview/ “预览命令在运行构建命令后启动服务器来预览您的 Nuxt 应用程序。”

我需要有人帮助我解释如何在 Nuxt 3 应用程序中安装 Vuex。

当我使用此命令安装 Nuxt 3 时npx nuxi init，我有一个新的 Nuxt 3 应用程序，但是当我想在 Nuxt 中使用 Vuex 时，我不能，因为默认情况下它没有安装在新的 Nuxt 3 应用程序中。
所以我想我需要使用“npm i vuex”安装它，好吧，我知道这很容易，但对我来说却不是。
我需要有人准确地向我解释如何让它发挥作用。

互联网上没有关于如何在新的 Nuxt 3 应用程序中设置 Vuex 的文档。
如果有人可以向我发送一个由 Nuxt 3 应用程序安装的简单项目npx nuxi init或在此处提供代码，我将了解其原因等...

我有一个.vue文件想要使用内联样式

<img src="~static/img/info/production/pic4.jpg" class="t22" />
<a href="/page/fresco-art" class="btn t23">First text</a>

<div class="hr t24"></div>
<h2 class="t25">Second text</h2>

<ul class="services">
  <li :style="{ backgroundImage: `url('~static/img/info/production/pic5.jpg')` }" class="sq">
    <div class="n">Third text</div>
  </li>
</ul>

使用标签的图像<img>可以正确显示，但background-image在标签中<li>则无法正确显示。

如何正确指定文件路径？