我是 Vue JS 的初学者，我正在尝试创建一个函数来为订单状态分配相应的颜色。我想使用 switch 语句来实现这一点，它将获取订单状态的值并将其传递给 getStatusColour 函数（），如下所示：
const getStatusColour = (orderStatus) => {
let statusColour = "";
switch (orderStatus) {
case "new":
statusColour = "bg-green-100 text-green-900";
break;
case "preparing":
statusColour = "bg-yellow-400 text-yellow-900";
break;
case "ready":
statusColour = "bg-blue-200 text-blue-800";
break;
case "delivered":
statusColour = "bg-green-300 text-green-800";
break;
case "failed":
statusColour = "bg-red-400 text-red-900";
break;
default:
statusColour = "bg-gray-100 text-gray-800"
}
return statusColour;
}
然后在Index.vue我的文件中export default { getStatusColour }，我想这应该是一个错误。
然后在模板中我这样称呼它：
<span :class="getStatusColour(order.status)">{{ order.status }}</span>
但我不断收到 …
我是 Nuxt JS 的新手。我想弄清楚如何从远程 URL 源下载 JSON 文件以在本地使用作为 nuxt 构建过程的一部分？
例如，如果 JSON 文件位于：
https://path/to/my/json
然后在我的 nuxt 应用程序中，我不想远程连接到该 JSON 文件，而是在本地使用它。因此，当我发布我的网站时，我不希望它依赖于外部资源。
目前，我正在使用该gulp-download-files插件通过 gulp 来完成此操作。
我正在尝试为 Nuxt.js 应用程序设置 Google Analytics 跟踪，但我根本没有获取任何数据。我觉得我一定错过了一些明显的东西。
我查看了https://google-analytics.nuxtjs.org/并浏览了第一个设置页面。我还需要做些什么吗？文档承诺路由器实例在安装过程中是开箱即用的，因此它应该自动处理页面跟踪，但这不是我的经验。
我已将 Google Analytics 模块添加到 nuxt.config.js 两次，如下所示，只是为了寻找脉搏，但没有这样的运气。我也分别尝试过。我传入的 ID 已在另一个网站上使用，并且我的应用程序构建时没有错误：
buildModules : [
'@nuxtjs/eslint-module',
'@nuxtjs/style-resources',
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: 'GTM-MYIDHERE',
layer: 'dataLayer',
pageTracking: true
},
modules : [
['nuxt-modernizr',
{
'feature-detects' : ['touchevents', 'img/webp'],
options : ['setClasses']
}],
['@nuxtjs/google-analytics', {
id: 'MYIDHERE',
layer: 'dataLayer',
pageTracking: true
}]
],
任何帮助将不胜感激。
我有以下 API URL 之一。归根结底，对于我的用例来说，我必须使用这些 URL 中的哪一个并不重要，但目前两者都不起作用。
http://localhost:3000/api/track/TRACKID
或者
http://localhost:3000/api/track?id=TRACKID
我如何获取TRACKIDAPI 代码？以下代码的结果是undefined.
export default async (req: IncomingMessage, res: ServerResponse) => {
console.log(req.id);
};
我尝试按照以下方式设置第一个 URL 的文件，但也没有成功。它只是导致 URL 变成http://localhost:3000/api/track/[id]
PROJECT/server/api/track/[id].ts
对于第二个 URL，我使用了以下设置。
PROJECT/server/api/track.ts
当 Nuxt 的路线发生变化时，我总是尝试转到页面顶部。
所以我把它放入我的app/router.scrollBehavior.js文件中：
export default function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
但它总是返回到最后保存的位置（null顺便说一下，它总是在我的控制台中）。
知道我在这里会错过什么吗？
我在我的项目中使用 Nuxt.js v2。现在，我通过在文件中设置启用了nuxt.js 自动导入组件。我想知道使用组件自动导入是否会对我的网站在生产中的性能产生负面影响？
我应该像在 vue.js 中那样手动导入组件吗？components: truenuxt.config.js
我想添加<body><noscript><h1>Please enable your javascript<h1></noscript></body>开发者模式。
我尝试在文件中配置它nuxt.config.js，但没有成功。
我的端点无法正常工作，很可能是因为 Express 所在的服务器未正常运行。我运行我的文件，并且npm run dev我的快递文件位于/middleware. 我尝试从中获取数据的端点位于/middleware/routes/crash.js. 在我的 vue 文件中，我有 axios 执行 get 请求localhost:3000/api/crash/:id，但是 axios 返回 400 错误，表明尚未发现该文件在服务器上运行。
包.json：
"scripts": {
"dev": "nuxt"
}
/中间件/index.js：
const express = require('express')
const app = express()
const crash = require('./routes/crash')
app.use(crash)
module.exports = {
path: '/middleware',
handler: app
}
/middleware/routes/crash.js：
const { Router } = require('express')
const router = Router()
const crypto = require("crypto");
...
router.get('/api/crash/:id')
我一直在寻找在布局中使用 Nuxt 中间件。但我不确定我是否可以，但是，因为我在Nuxt 2中使用了它，所以在Nuxt 3中可能是可能的。
该项目有 2 种不同的布局：Public.vue和Admin.vue。我只想在使用管理布局的页面中使用中间件。因为使用它的页面只能由登录用户访问，并且它将在中间件内部进行检查。
我尝试过这个（不起作用）：
管理布局| 管理.vue
<template>
<div>
<client-only>
<admin-header />
</client-only>
<main>
<slot />
</main>
<client-only>
<admin-footer />
</client-only>
</div>
</template>
<script lang="ts">
import AdminHeader from "~~/components/admin/Header.vue"
import AdminFooter from "~~/components/admin/Footer.vue"
definePageMeta({
middleware: "admin-auth"
});
</script>
中间件| adminAuth.ts
export default defineNuxtRouteMiddleware((to, from) => {
console.log(to);
console.log("Acessando o admin auth middleware");
})
我正在 Nuxt 3 应用程序中创建一个 socket.io 实现。当我处于开发模式时，websockets 可以工作，但我收到此错误消息。我使用的是 Nuxt 版本 nuxt v3.0.0-rc.8，这是我的 nuxt.config.ts 文件的样子：
import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: [
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css'
],
build: {
transpile: [
'primevue'
],
},
modules: [
'./modules/socket'
]
})
这是我的 module/sockets.ts 文件的样子：
import { Server } from 'socket.io';
import { defineNuxtModule } from '@nuxt/kit';
export default defineNuxtModule({
setup(_, nuxt) {
console.log('Socket Read');
nuxt.hook('listen', (server) => {
console.log('Socket listen', server.address(), server.eventNames())
const io = new Server(server) …nuxt.js ×8
vue.js ×8
javascript ×3
nuxtjs3 ×3
vuejs2 ×2
express ×1
json ×1
node.js ×1
scroll ×1
server ×1
socket.io ×1
tailwind-css ×1
typescript ×1