小编kis*_*ssu的帖子

如何获取槽中子元素的 Dom 元素。尝试在生命钩子 onMounted() 中获取一个对象的 el vnode 属性为 null

我的组件：

<template>
   <div>{{text}}</div>
   <slot></slot>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";

export default defineComponent({
    name: "my-component",
    props: {
        text: {
            type: String,
            default: '',
            required: true,
        },
    },
    setup( _, ctx) {
        
        onMounted( () => {
            if (ctx.slots.default) {
                console.log( (ctx.slots.default()[0]) ); // <- property "el" - is null
            }
        })

    },
});
</script>

我使用 NuxtJS 2，并且需要有 2 个或更多具有不同配置的 axios 实例。

在 VueJS / JS classic 中，我可以创建一个新实例axios：

var axiosElasticSearch = axios.create({
  baseURL: 'https://elastic.com/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

但在 Nuxt 中，由于 SSR 层，他们应用自己的配置来处理这个问题。

在我的 Nuxt 配置中，我有这个：

axios: {
    baseUrl: process.env.API_URL,
    browserBaseUrl: process.env.BROWSER_API_URL,
    withCredentials: true,
    headers: {
      common: {
        Accept: 'application/json',
        Authorization: 'Bearer ' + process.env.API_TOKEN
      }
    }
  },

然后，我可以轻松地注射它。

可以在 Nuxt 中管理吗？我查看了代理选项，但我认为这不是我想要的。

我正在尝试在 Nuxt JS 框架中启动一个新项目

npx create-nuxt-app project-name

完成安装后我发现有些目录丢失了。缺少的目录有：布局、中间件、插件和资产。一开始我以为自己做错了，然后又试了第二次、第三次，结果都是一样。我搜索了他们的官方文档和 GitHub 问题关于这个问题，但我没有找到任何东西。

• npm ：“2012 年 14 月 6 日”
• nuxt：“^2.15.3”

我的两个组件突然出现这个 Stylelint 错误，我不知道为什么。

Unexpected empty source (no-empty-source)\n

我创建了第三个组件，并将内容删除到没有剩余内容的程度，并且该组件仍然显示错误。\n那么问题可能是什么？\n我试图理解这一点文档页面，但我不\不太明白其中的内容，它没有解释什么是“来源”。

这是简化的组件（项目中未使用）：

Unexpected empty source (no-empty-source)\n

我得到：

components/common/NewComponent.vue\n 12:31  \xc3\x97  Unexpected empty source   no-empty-source\n

我不能在这里使用 window.location 因为它是 SSR 应用程序。useRouter、useRoute 和 useNuxtApp 也没有域名。nuxtApp.ssrContext 未定义。

export default defineNuxtRouteMiddleware((to: any, from: any) => {
  console.log("GET HOST HERE")
})

我慢慢开始从 nuxt 2 迁移到 nuxt 3。以前我曾经使用 axios。

在Nuxt3中，推荐使用useFetch

然而，useFetch 的行为非常奇怪。呼叫不是系统进行的。

例如在这段代码中：

async mounted() {
        const store = useAuth();
        let response = await axios.get('http://dev.test.fr/api/secured/admin', {headers : store.authHeader() });

        this.sensibleInformation  = response.data;
    },

使用 Axios，每次我打开此页面时，都会进行调用并且 sensibleInformation 是最新的。

使用useFetch，语法类似

    async mounted() {
        const store = useAuth();
        let response = await useFetch('http://dev.malt.fr/api/secured/admin' , {method : 'get', headers : store.authHeader() });
        this.sensibleInformation  = response.data;
    },

但有时对服务器的调用已经完成。因此，合理的信息大部分时间都是空的。而且我在文档中没有找到任何解释。

也许这里有我想念的东西。

我正在使用 nuxt 3.0.0-rc.6

我正在使用带有电容器的 NuxtJS。当我们滚动时，IOS 设备上的顶部状态栏会重叠。我还在"ios": {"contentInset": "always"}capacitor.config.json中添加了。

尽管我还包含了 CSS，但它在顶部创建了额外的空间。

body {
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 }

我一直在尝试在 Nuxt 中使用vue-tel-input-vuetify并且遇到了如下图所示的问题，我也尝试了此链接Github中的所有解决方案，但我得到了相同的错误。

安装后，我创建了一个插件文件plugins/vue-tel-input-vuetify.js并向其中添加了以下代码。

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)

之后，我将其添加到nuxt.config.js

plugins: [
    '~/plugins/vue-tel-input-vuetify',
    { src: '~/plugins/vue-google-charts', mode: 'client' }
  ]

在我的组件的脚本标签之间，我这样做了：

import { VueTelInputVuetify } from 'vue-tel-input-vuetify'

export default {
  components: {
    VueTelInputVuetify,
  },
...

在我的组件的模板标签之间添加了以下内容：

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)

我创建了一个全新的项目，npx create-nuxt-app my-cool-project但在运行时确实有一些错误yarn dev。

虽然“宽松”选项在你的@babel/preset-env 配置中被设置为“false”，但它不会被用于@babel/plugin-proposal-private-property-in-object 因为“宽松”模式选项是@babel/plugin-proposal-private-methods 设置为“true”。@babel/plugin-proposal-class-properties、@babel/plugin-proposal-private-methods 和 @babel/plugin-proposal-private-property-in-object（当它们是启用）：您可以通过将 ["@babel/plugin-proposal-private-property-in-object", { "loose": true }] 显式添加到 Babel 配置的“插件”部分来消除此警告。

你对这个有什么想法吗？它让我想起了另一个问题：Nuxt js - 全新安装的 nuxt 2.14.6 包含 babel“宽松选项”警告

我尝试使用Nuxt 3 中的 useFetch 可组合pending项status来禁用按钮并在 POST 请求挂起时显示微调器，如下所示：

const { pending, status, execute } = await useFetch("/notifyme", {
  immediate: false,
  baseURL: config.public.apiBase,
  method: "POST",
  body: {
    email: email.value,
  },
});

当如下使用时pending，即使在发出请求之前，该按钮也会被禁用，并且默认情况下会显示微调器：

<button
:disabled="pending"
type="submit">
Notify me
<ButtonSpinner v-show="pending" />
</button>

当status如下使用时，按钮不会被禁用，并且在发出请求时微调器不会显示：

<button
:disabled="status==='pending'"
type="submit">
Notify me
<ButtonSpinner v-show="status==='pending'" />
</button>

我对如何使用pending和statususeFetch 以及为什么它们如此相似而存在感到困惑。