小编kis*_*ssu的帖子
了解 nuxt 中的延迟加载和水合作用
第一个问题
当我使用nuxt 的延迟加载时，
例如components: true
<div v-if="condition"> <!-- 1 -->
<LazyComponent v-if="condition"/>
</div>
<div v-if="condition"> <!-- 2 -->
<LazyComponent/>
</div>
<div v-if="condition"> <!-- 3 -->
<Component/>
</div>
v-if 应该位于组件上以便延迟加载，否则当父级有条件时它将起作用，如果它与父级一起工作，则组件必须以Lazy?开头
第二个问题
我正在使用vue-lazy-Hydration包来减少交互时间和总阻塞时间。当 (LazyHydrate when-idle) 采取行动时，我不明白浏览器何时空闲。
5
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Tailwind 完全编译 css，而不剥离未使用的类
我有一个带有 Tailwind 的 Laravel 项目，并配置了 Webpack：
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
这是我的 Tailwind.config：
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {
fontFamily: {
sans: ["Rubik", ...defaultTheme.fontFamily.sans],
},
},
colors: {
transparent: "transparent",
current: "currentColor",
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
brandcolor: {
50: "#f3d2e4",
100: "#ff53aa",
200: "#ff49a0",
300: "#ff3f96",
400: "#f8358c",
500: "#ee2b82",
600: "#e42178",
700: "#da176e",
800: "#d00d64",
900: "#c6035a",
}, …5
推荐指数
推荐指数
1
解决办法
解决办法
4924
查看次数
查看次数
Nuxt3-Vue中useRoute和useRouter有什么区别
我想了解一下，有什么区别
const Route = useRoute()
和
const Router = useRouter()
在 Nuxt3/Vue 中。
另外，我无法正确使用路由器。
提交时，我想使用查询字符串推送到另一个页面。
<template>
<button @click="SearchTaxi"></button>
</template>
<script setup>
import { ref } from 'vue'
const router = useRouter()
const pickuppoint = ref('')
const dropoffpoint = ref('')
const SearchTaxi = () => {
router.push({
path: `/airport-transfers/results?pickuppoint=${pickuppoint.value}&dropoffpoint=${dropoffpoint.value}`})
}
</script>
我预计路线会更改为
"url/airport-transfers/results?pickuppoint=XXXX&dropoffpoint=XXXX"
但我得到了
"url/airport-transfers/results"
5
推荐指数
推荐指数
1
解决办法
解决办法
3569
查看次数
查看次数
Vue 的 DOM 内容中使用 PascalCase 或 kebab-case？
我正在尝试了解有关组件的 vue 文档。我在文档中看到了这一段：
If you are authoring your templates directly in a DOM (e.g. as the content of a native <template> element), the
template will be subject to the browser's native HTML parsing behavior.
In such cases, you will need to use kebab-case and explicit closing tags for components:
----------------------------------------------------------------------------------------------------
<!-- if this template is written in the DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
我不完全明白这意味着什么。在我的项目中，我可以毫无问题地使用 pascal case 或 kebab case。为什么文档这么说In such cases, you will need to use kebab-case？
它指的是什么案例？ …
5
推荐指数
推荐指数
1
解决办法
解决办法
2943
查看次数
查看次数
如何使用vue3+vite编译Web Worker？
我有一个简单的 Web Worker，它执行启动并处理来自 websocket 的消息。处理程序的逻辑是从另一个模块“MessageHandler”导入的。原因是 websockets 无论如何都依赖于外部依赖项（stompjs），并且我想为不支持 webworkers 的浏览器保留一个带有消息挂起逻辑的模块。
import { connect, destroy } from "../src/utilities/MessageHandler";
onmessage = (message) => {
const {type, value} = message.data;
switch (type?.toLowerCase()) {
case "connect":
connect(value, message => postMessage(message))
break;
case "destroy":
destroy();
break;
}
}
在开发服务器上，这工作得很好，我可以将文件放在公共文件夹中，并使用以下命令启动 Worker：
if (typeof Worker !== "undefined") {
const workerUrl = new URL("/worker.js", import.meta.url);
const worker = new Worker(workerUrl, {type:"module"});
console.log(workerUrl);
worker.postMessage({type:"connect", value: {...channelInfo}},);
worker.onmessage = combineValues;
onUnmounted(() => {
worker.postMessage({type:"destroy"},);
worker.terminate();
})
} else {
console.log("Workers not …5
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
nuxt 3 中静态文件夹中的图像不显示
我正在使用 Nuxt 3
这是目录结构
图像是这样加载的
<img src="/images/index/pic-left.svg" />
我也尝试过（从不开始/）
<img src="images/index/pic-left.svg" />
又没用了
有什么问题 ？
5
推荐指数
推荐指数
1
解决办法
解决办法
5532
查看次数
查看次数
如何在 Nuxt 中将“text/javascript”添加到 <head>
我必须在<head>标签中添加以下脚本。但在 Nuxt 中，我必须将其作为 objext 添加到 nuxt.config.js 中。
我该怎么做呢？
<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: "participant@email.com",// 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>
4
推荐指数
推荐指数
1
解决办法
解决办法
6903
查看次数
查看次数
vue中为什么对象变成了代理对象？
我遇到的对象问题是，当我将对象分配给数据属性时，它会转换为代理对象。
\n这就是我正在做的事情
\n data() {\n return {\n msg: "",\n notifications: {},\n\n };\n },\n this.notifications = TokenService.getUserInfo().unread_notifications;\n这就是我接收对象的方式
\nProxy {0: {\xe2\x80\xa6}, 1: {\xe2\x80\xa6}, 2: {\xe2\x80\xa6}, 3: {\xe2\x80\xa6}, 4: {\xe2\x80\xa6}}\n[[Handler]]: Object\n[[Target]]: Array(5)\n[[IsRevoked]]: false\n是什么原因？
\n4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何在 JS switch 语句中使用动态 tailwind 类并在 Vue 中正确传递它们？
我是 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>
但我不断收到 …
4
推荐指数
推荐指数
1
解决办法
解决办法
2174
查看次数
查看次数
Nuxt.js - Google Analytics 设置不跟踪任何活动
我正在尝试为 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
}]
],
任何帮助将不胜感激。
4
推荐指数
推荐指数
1
解决办法
解决办法
3733
查看次数
查看次数
标签 统计
vue.js ×6
nuxt.js ×5
vuejs3 ×4
javascript ×3
nuxtjs3 ×2
tailwind-css ×2
tailwind-ui ×1
vite ×1
vue-router ×1
web-worker ×1