小编kis*_*ssu的帖子

我创建了一个全新的项目，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.js应用程序非常陌生，我正在尝试使用Nuxt.js and Vue.js. 在使用创建项目期间，Nuxt cli我添加了Bootstrap-vue.

我在Bootstrap modal创建方面面临一些问题，因此我想Bootstrap vue完全删除并将好的旧平原添加Bootstrap到我的应用程序中。我尝试根据此处找到的一些答案添加，但由于某种原因，它没有按预期工作，并且我的Modal没有正确显示drop-downs等。所以我的猜测是我没有正确从我的应用程序中删除并完全Bootstrap vue添加Bootstrap。

如果我在这里错过了一些东西，有人可以告诉我吗：

** 删除 Bootstrap-vue ***

1. npm i bootstrap-vue --save。
2. bootstrap-vue.js从文件夹中删除文件plugins。
3. plugin从......中去除nuxt-config.js：plugins: ["@/plugins/bootstrap-vue"],

** 安装旧版 Bootstrap ** 将以下 CDN 链接添加到我的nuxt-config.js文件中：

script: [
      {
        src: "https://code.jquery.com/jquery-3.6.0.min.js"
      },
      {
        src:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      }
]

link:[
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      },
      {
        rel: …

我使用的是 Nuxtjs 2.15.7，最近在我的控制台中收到此错误

当我搜索时，只需要@nuxt/pwa 发布. 但我的项目中没有pwa模块！

这是我的 package.json

{
  "name": "my-app",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "dev:host": "nuxt --hostname 0.0.0.0 --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/google-gtag": "^1.0.4",
    "@nuxtjs/gtm": "^2.4.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "swiper": "^5.4.5",
    "v-viewer": "^1.5.1",
    "vee-validate": "^3.3.7",
    "vue-awesome-swiper": "^4.1.1",
    "vue-cropperjs": "^4.1.0",
    "vue-easy-dnd": "^1.12.2",
    "vue-persian-datetime-picker": "^2.2.0",
    "vue-product-zoomer": "^3.0.1",
    "vue-sweetalert2": "^4.2.1",
    "vue2-editor": "^2.10.2",
    "vuedraggable": "^2.24.0"
  },
  "devDependencies": { …

我试图理解为什么更改用于提供初始值的道具不会导致数据变量发生更改。

在下面的示例中，更改initialName父组件中传递的值也会导致initialName子组件中的值发生更改。但是，name保留其最初初始化的值。我相信，更改道具会重新渲染组件，这似乎是错误的。

ChildComponent.vue

<template>
    <div>
        {{initialName}}
        {{name}}
    </div>
</template>
<script>
export default {
    props: {
        initialName: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            name: this.initialName,
        };
    },
</script>

ParentComponent.vue

<template>
    <ChildComponent :initialName="AnExampleName"/>
</template>
<script>
import ChildComponent from ChildComponent.vue
export default {
    components: {
        ChildComponent
    }
</script>

我已经能够通过观看 prop 和 update 来解决这个问题name，但这感觉不是最好的方法。

为什么改变 prop 不会改变数据？有没有更好的方法将初始值传递给子组件？

我正在使用 Prettier，但它不会格式化导入顺序。

例如，当在 VS Code 中使用 Go 时，我可以按任何顺序导入内容，但 Gofmt 总是会按正确的顺序重新排序 - 我猜它是 VS Code 官方 Go 扩展的一部分。

如何在 VS Code 中实现 Vue 中的类似功能？

我的代码：

export const useMenuStore = defineStore("menuStore", {
  state: () => ({
    menus: [],
  }),
  actions: {
    async nuxtServerInit() {
     
       const { body } = await fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) => response.json());
       console.log(body);
       this.menus = body;
       resolve();
    },
   
  },
});

NuxtServerInit 无法在 nuxt js vuex 模块模式下进行初始页面渲染。任何人都知道此错误，请帮助我。

我正在尝试使用Vitest为我的应用程序编写 UT，该应用程序在 Vue 之上有 Nuxt。

definePageMeta但当我尝试模拟时，我变得不确定test.vue。

这是我的组件 test.vue-

<script setup lang="ts">
definePageMeta({
  layout: 'xyz',
  title: 'test component',
});
</script>

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

这是我的 UT 文件，命名test.spec.ts如下 -

import { describe, expect, it } from 'vitest';

import Index from '../pages/test.vue';
import { mount } from '@vue/test-utils';

describe('renders the test component', () => {
  it('renders properly', () => {
    const wrapper = mount(Index);
    expect(wrapper.text()).toContain('Hello Vitest');
  });
});

这是我收到的错误 -

我正在尝试了解有关组件的 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？

它指的是什么案例？ …

在为给定路线渲染页面之前，我想首先同步获取必要的数据。理想情况下，我希望在页面组件中获取数据，但我不反对在路由器文件中执行此操作。我已经阅读并尝试了各种方法，但部分挑战来自于这样一个事实：构建组件的方法也有多种，并且某些功能的使用也各不相同。

就我而言，我使用 Composition API 和<script setup>语法构建单个文件组件。Vue Router文档链接讨论了“导航前获取”，我可以在其中找到beforeRouteEnter或beforeRouteUpdate，但这是使用选项 API 显示的。他们确实有Composition API的页面提到我可以使用onBeforeRouteUpdate，但它使用了该setup()函数。我想无论如何我都会尝试一下<script setup>：

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(() => {
  console.log('onBeforeRouteUpdate')
})
</script>

然而，这并不执行。我尝试过的最接近的方法是在路由器中获取数据，使用守卫beforeEnter，并将数据设置到meta属性上，然后可以在组件中的路由实例上访问该属性：

beforeEnter: (to, from, next) => {
  fetch('https://pokeapi.co/api/v2/pokemon/ditto')
    .then(res => res.json())
    .then(res => {
    to.meta.pokemon = res;

    next();
  });
}

但文档中注明的这一点beforeEnter仅在进入路线时触发。参数更改不会重新触发此操作，这意味着我必须在组件中的路线上设置一个观察程序。我还不如在组件本身中拥有所有这些逻辑。

我似乎找不到一个好的方法来做到这一点，但我可能忽略了一些事情。如果有人有一些指示或建议，我将不胜感激。提前致谢。

我尝试将外部 javascript 文件添加到nuxt.config.ts。但 nuxt 没有加载该文件。

nuxt.config.ts文件：

export default defineNuxtConfig({

    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    script: [
        {
            src: 'script.js',
        }
    ],
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})