nuxt.js 相关问题

我在下面的示例中对 th 和 td 应用了位置粘性。但是，当类中存在粘性时，框阴影不起作用。有人可以告诉我为什么吗？在下面的示例中，我已将位置粘性应用于 th 和 td。但是当类中存在粘性时，盒子阴影不起作用。有人可以告诉我为什么吗？ <div class="overflow-x-auto lg:overflow-visible"> <div class=""> <table class="border-collapse table-fixed w-[1000px] lg:table-auto lg:w-full border border-grey-200"> <thead class="bg-grey-200"> <th class="sticky left-0 top-0 p-4 z-10 shadow-grey w-[116px] lg:w-[140px] bg-grey-200"></th> <th class="p-4 align-middle text-body-30-m text-left" v-for="(header, headerIndex) in data.headerColumns" :key="headerIndex"> {{ header }} </th> </thead> <tbody> <tr class="border border-b-grey-200" v-for="(row, rowIndex) in data.rows" :key="rowIndex"> <td class="border border-r-grey-200 align-top" :class=" cell.icon ? `grid p-4 justify-center border-0` : cell.image ? `text-center p-4 sticky left-0 shadow-grey bg-white z-10 w-[116px] lg:w-[140px] ` : cell.text ? `text-left p-4 pr-8` : `p-4` " v-for="(cell, cellIndex) in row.cells" :key="cellIndex"> <div v-if="!cell.text && !cell.icon && cell.image && cell.link" class="grid grid-flow-row gap-3"> <img :src="cell.image" :alt="cell.altText" /> <span>{{ cell.link }}</span> </div> <span v-if="!cell.image && !cell.link && !cell.text"><smyths-icons v-if="cell.icon" :name="cell.icon" size="24" color="#008540" ></smyths-icons ></span> <span v-if="!cell.image && !cell.link && !cell.icon">{{ cell.text }}</span> </td> </tr> </tbody> </table> </div> </div> 如果要为 Tailwind 库中的元素设置阴影，则必须在类中添加 shadow 关键字，如下所示：

css vue.js bootstrap-4 nuxt.js tailwind-css

回答 1 投票 0

为什么Nuxt静态生成添加源json和js文件来构建？

在 Nuxt 项目中，我通过从本地 JSON 文件获取数据来生成静态页面。当我运行纱线生成时，一切都很完美。但是，除了 /public/

nuxt.js vuejs3 nuxtjs3 nuxt3 static-site-generation

回答 1 投票 0

如何确认SSR渲染的HTML

在Nuxt 3中，可以通过下面的代码确认服务端渲染是否完成，但是渲染完成后是否可以获取到生成的HTML呢？我想检查一下

nuxt.js vuejs3 server-side-rendering nuxtjs3

回答 1 投票 0

如何将 nuxtjs 3 组件嵌入到外部网站以提供消息传递服务以支持客户？

我正在使用 NuxtJs 3 开发一个基于客户关系的 Web 应用程序。该项目有不同的用例负责使用 NuxtJs 3。然而，该项目即将完成，但我...

vue.js nuxt.js widget messaging nuxtjs3

回答 1 投票 0

Docker-Compose SSR 应用程序，来自服务器的请求和来自浏览器的请求

我正在进行以下部署（docker-compose），它由带有Nuxt（SSR）的前端和带有Django的后端组成：部署版本：'3' 服务：后端：重新启动：始终 ...

docker docker-compose axios nuxt.js server-side-rendering

回答 1 投票 0

dockerized 环境中的 Nuxt SSR 水合

我有一个带有 SSR 的 Nuxt.js 应用程序。它使用我在 Django 中构建的 API。在我的开发环境中，一切正常。但在 dockerized 设置中，我遇到了以下问题：该...

docker vue.js docker-compose axios nuxt.js

回答 2 投票 0

如何在Nuxt中添加“text/javascript”到<head>

我必须在标签中添加以下脚本。但在 Nuxt 中，我必须将其作为 objext 添加到 nuxt.config.js 中。我该怎么做呢？ /...</desc> <question vote="4"> <p>我必须将以下脚本添加到 <pre><code><head></code></pre> 标签中。但在 Nuxt 中，我必须将其添加为 nuxt.config.js 中的 objext。</p> <p>我该怎么做？</p> <pre><code><script type="text/javascript"> /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */ /* window.grsfConfig = { email: "<a href="/cdn-cgi/l/email-protection" data-cfemail="5f2f3e2d2b363c362f3e312b1f3a323e3633713c3032">[email protected]</a>",// Replace this with the participant's email address hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value }; */ (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document); </script> </code></pre> </question> <answer tick="true" vote="5"> <p>有两种方法</p> <ol> <li>首先：在 nuxt-page-component 中使用 nuxt <pre><code>head()</code></pre>（<strong>推荐</strong>）</li> </ol> <pre><code>export default{ head(){ return { script: [ { type:'text/javascript', innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */ /* window.grsfConfig = { email: "<a href="/cdn-cgi/l/email-protection" data-cfemail="ec9c8d9e98858f859c8d8298ac89818d8580c28f8381">[email protected]</a>",// Replace this with the participant's email address hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value }; */ (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);` } ] } } } </code></pre> <p>在<pre><code>nuxt.config.js</code></pre>：</p> <pre><code>module.exports = { head: { script: [ { type:'text/javascript', innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */ /* window.grsfConfig = { email: "<a href="/cdn-cgi/l/email-protection" data-cfemail="abdbcad9dfc2c8c2dbcac5dfebcec6cac2c785c8c4c6">[email protected]</a>",// Replace this with the participant's email address hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value }; */ (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);` } ] } }; </code></pre> <p>这就是你得到的 <a href="https://i.stack.imgur.com/CPG8D.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0NQRzhELnBuZw==" alt=""/></a></p> <ol start="2"> <li>第二：自定义<pre><code>index.html</code></pre></li> </ol> <pre><code><!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} <script type="text/javascript"> /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */ /* window.grsfConfig = { email: "<a href="/cdn-cgi/l/email-protection" data-cfemail="1b6b7a696f7278726b7a756f5b7e767a727735787476">[email protected]</a>",// Replace this with the participant's email address hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value }; */ (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document); </script> </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> </code></pre> </answer> <answer tick="false" vote="1"> <p>Nuxt 中的正确方法是为 GrowSurf 创建自己的插件（请参阅 <a href="https://nuxtjs.org/docs/2.x/directory-structure/plugins" rel="nofollow noreferrer">nuxt 插件文档</a>）。</p> <p>首先，在新文件中创建插件<pre><code>plugins/growsurf.js</code></pre>：</p> <pre><code>/* eslint-disable */ export default ({ app }) => { /* ** Only run on client-side and only in production mode */ if (process.env.NODE_ENV !== 'production') { return; } /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */ /* window.grsfConfig = { email: "<a href="/cdn-cgi/l/email-protection" data-cfemail="3848594a4c515b514859564c785d55595154165b5755">[email protected]</a>",// Replace this with the participant's email address hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value }; */ (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document); } </code></pre> <p>然后告诉 Nuxt 将其导入到您的主应用程序中：</p> <pre><code>// nuxt.config.js export default { plugins: [{ src: '~plugins/growsurf.js', mode: 'client' }] } </code></pre> <p>此外，您可以在官方 Nuxt FAQ 中找到 Google Analytics 的类似示例：<a href="https://nuxtjs.org/faq/ga" rel="nofollow noreferrer">https://nuxtjs.org/faq/ga</a></p> </answer> </body></html>

nuxt.js

回答 0 投票 0

Nuxt 3：使用defineNuxtPlugin(nuxtApp)时，nuxtApp上不存在$pinia实例

Nuxt：3.6.2 皮尼亚：2.1.4 @pinia/nuxt：0.4.11 在为 Pinia 定义 Nuxt 3 插件时，我需要访问 nuxtApp 上存在的 $pinia 实例。 DefineNuxtPlugin() 函数传递参数...

nuxt.js vuejs3 nuxtjs3 pinia

回答 1 投票 0

Nuxt3 中的 TS 模板引用保持为空

我有一个父组件Images.vue，有3个子组件ImagesGridArea1、ImagesGridArea2和ImagesGridArea3。孩子们的标签是这样的：我有一个父组件 Images.vue 和 3 个子组件 ImagesGridArea1、ImagesGridArea2 和 ImagesGridArea3。孩子们的标签是这样的：<ImagesGridArea1 ref="ref1" :key="ref1key" ... />。父脚本：const ref1 = ref(null);没什么特别的。问题是：如果我使用 v-if 仅加载必要的子组件，则 refs 在 JS 中工作正常，但只有第一个 ref （对于默认子组件）在 TS 中工作。 ref2 和 ref3 保持为空。 Ofk，如果我将其更改为 v-show，它们就可以工作，至少使用像这样的函数引用：<ImagesGridArea2 :ref="(el) => {ref2=el as ComponentPublicInstance}" :key="ref2key" ... />。但如果不使用的话，我真的很想让它们保持卸载状态。我可以以某种方式获取子级的实例引用而不保持它们安装（v-if）吗？好的，使用带有 ref 的标签解决了这个问题。还是不明白为什么它更早与 JS 一起工作。

typescript nuxt.js ref

回答 1 投票 0

nuxt.js 相关问题

最新问题