小编kis*_*ssu的帖子

我是 nuxt 和 vue 的新手，我正在尝试将颜色主题从深色更改为浅色。我的项目是由 nuxt cli 生成的，我有这个版本：

"dependencies": {
"core-js": "^3.8.3",
"nuxt": "^2.14.12",
"vuetify": "^2.4.4"
}
"devDependencies": {
   "@nuxtjs/vuetify": "^1.11.3"
}

我正在通过此链接学习如何执行此操作：https://vuetifyjs.com/en/features/theme/

但实际上，当我尝试更改某些颜色或主题时，什么也没有发生。我试图通过光明或黑暗的道具，但仍然没有发生

<v-app dark>...</v-app>

插件/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#00bcd4",
        secondary: "#8bc34a",
        accent: "#3f51b5",
        error: "#e91e63",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
    }
  }
});

我希望文本具有模糊的白色背景。但我实际上正在努力应对模糊效果。每次我尝试使用滤镜模糊时，div 都会变得模糊，但我的文本会消失。

这是我迄今为止用 tailwindcss 编写的代码：

<div class="inline-block">
          <div class="px-1 filter blur bg-white bg-opacity-75">
            <span
              class="font-bold text-black-dark text-sm leading-17px z-1003"
            >
              {{ dynamicText }}
            </span>
          </div>
        </div>

它应该是这样的：

因为文本是动态的，所以我无法为父 div 元素设置固定的宽度或高度。有人可以帮助我实现上述期望的结果吗？

我是 Nuxt.js/Vue.js 的新手，所以这里有一些新手问题：D

我在从 Nuxt.js 应用程序中的联系人发送邮件时遇到问题。我正在尝试使用 nuxt-mailer 但无法使其工作。我已经安装了axiosnuxt -mail。

我收到 500（内部服务器错误）。

所以我将其添加到nuxt.config.js：

'@nuxtjs/axios',
['nuxt-mail', {
  message: {
    to: 'my-email',
  },
  smtp: {
    host: "localhost",
    port: 587,
  },
}],

我是否应该将邮件放在“收件人”中我想要接收邮件的地方？我应该localhost进站host还是http://localhost？最后，我应该用什么双关语来表达“港口”？我的本地主机上的帖子是 3000 吗？

好吧，接下来，我在组件中的表单如下所示：

<template>
  <div class="container">
    <form>    
      <label for="name">Ditt namn</label>            
      <input id="name" type="text" v-model="name"/>

      <label for="email">Din epostadress</label>            
      <input id="email" type="email" v-model="email"/>

      <label for="phone">Telefon</label>            
      <input id="phone" type="phone" v-model="phone"/>

      <label for="message"> Meddelande: </label>
      <textarea id="message" v-model="message"/>
      
      <button type="submit" @click.prevent="send">Send email </button>
    </form> …

我在 Plesk 服务器上托管一个域。它包含Nodejs V 12.4.0，我没有使用诸如express之类的东西。我只是create-nuxt-app在我的电脑中使用创建nuxt应用程序NodeJs V. 16，然后运行命令npm run build，然后在我上传文件/文件夹（.nuxt、nuxt.config.js、静态和包） .json）在服务器上到文件夹httpdoc/merostatus.com/（在此处上传所有文件/文件夹）。

服务器中Nodejs的设置：

Document Root : /httpdocs/merostatus.com/static    
Application Mode : production  
Application URL : http://merostatus.com
Application Root : /httpdocs/merostatus.com  
Application Startup File : node_modules/nuxt/bin/nuxt.js

完成此设置后，我单击Plesk 上的NPM 安装按钮并重新启动应用程序

但输出并不如预期。它正在搜索页面文件夹，当我将应用程序启动文件指向.nuxt/server.js时，它没有找到 vue 实例。

我的服务器刚刚上线以解决问题 https://merostatus.com

我试图在我的项目中添加 jQuery，尽管我收到一个错误，指出它未定义

  plugins: [
    { src: '~/plugins/js/svgSprite.js', mode: 'client' },
    { src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' }, <-- gives me error
    { src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' },
    { src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' },
    { src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' },
    { src: '~/plugins/js/theme.js', mode: 'client' }
  ],

为什么会发生这种情况，我显然是在 bootstrap-select 之前声明了 jQuery。

我正在努力将 sweet Alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用vue-sweetalert2但我在某些时候它定义了全局变量。

// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;

你能帮我，如何访问这些全局变量吗？文档没有表明这一点。

我想目标是在我的插件中添加如下内容：

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSweetalert2)

  return {
    provide: {
      swal: swalFunction // <- how to access this ?
    }
  }
})

首先我的配置：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n    // if you want to use static HTML generation (SSG)\n    target: 'static',\n\n    // if you want to use server-side rendering (SSR)\n    ssr: true,\n\n    css: [\n        'assets/scss/main.css',\n        'assets/scss/header.css',\n        '@fortawesome/fontawesome-svg-core/styles.css'\n    ],\n\n    build: {\n        transpile: [\n            '@fortawesome/vue-fontawesome',\n            '@fortawesome/fontawesome-svg-core',\n            '@fortawesome/pro-solid-svg-icons',\n            '@fortawesome/pro-regular-svg-icons',\n            '@fortawesome/free-brands-svg-icons'\n        ]\n    }\n\n})\n

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';\n\n/** Fontawesome for Nuxt 3\n * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt \n * \n*/\n\n// import the fontawesome core\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\n\n// …

我在一个项目中使用 Nuxt3，当使用文档中的 cli 安装它时，它生成了一个 vue 2.7 项目。

我怎样才能使用 vue 3？

我已经有一段时间没有使用 Vue 进行编程了。vuedef但是，当我开始在新创建的文件中输入类似内容时，.vue它会自动建议我以下内容，而不是我自己编写：

<template>
</template>

<script>
</script>

<style>
</style>

我不记得我是怎么做到的，但我猜这是我必须输入的某个单词。
也许它来自 VS-Code 插件？

我刚刚升级到 Nuxt 3 的正式版本，并将我的服务器中间件更新为以下内容。但是，我尝试的任何操作都不会删除或覆盖默认的“x-powered-by”标头。我想把它改成别的东西。它总是说x-powered-by: Nuxt

export default defineEventHandler((event) => {
  event.node.res.removeHeader('x-powered-by') // Does not remove the header 
  event.node.res.setHeader('x-powered-by', 'Something Else') // Does not overwrite header
})

这曾经有效，但此方法已被弃用：

import type { IncomingMessage, ServerResponse } from 'http'

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.setHeader('x-powered-by', 'Something Else')
}