标签: quasar-framework

（节点：21216）UnhandledPromiseRejectionWarning：错误：找不到模块“ajv/dist/compile/codegen”

• loader.js:815 Function.Module._resolveFilename 内部/模块/cjs/loader.js:815:15

• loader.js:667 Function.Module._load 内部/模块/cjs/loader.js:667:27

• loader.js:887 Module.require 内部/modules/cjs/loader.js:887:19

• helpers.js:74 需要内部/modules/cjs/helpers.js:74:18

• typeof.js:3 对象。[前面]/[mini-css-extract-plugin]/[ajv-keywords]/dist/definitions/typeof.js:3:19

• loader.js:999 Module._compile 内部/modules/cjs/loader.js:999:30

• loader.js:1027 Object.Module._extensions..js 内部/模块/cjs/loader.js:1027:10

• loader.js:863 Module.load 内部/modules/cjs/loader.js:863:32

• loader.js:708 Function.Module._load 内部/模块/cjs/loader.js:708:14

• loader.js:887 Module.require 内部/modules/cjs/loader.js:887:19

（节点：21216）UnhandledPromiseRejectionWarning：未处理的承诺拒绝。此错误的根源是在没有 catch 块的情况下抛出异步函数内部，或者拒绝未使用 .catch() 处理的 Promise。要在未处理的 Promise 拒绝时终止节点进程，请使用 CLI 标志--unhandled-rejections=strict（请参阅https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。（拒绝 ID：1）（节点：21216）[DEP0018] DeprecationWarning：未处理的承诺拒绝已被弃用。将来，未处理的 Promise 拒绝将会以非零退出代码终止 Node.js 进程。

当我更改所选值时，该函数未运行。我该如何解决？这是我的代码：

<q-select
  v-model="single"
  :options="['def', 'abc', '456', '123']"
  use-chips
  label="Select One"
  @input="showChannel()"
/>

JavaScript 代码：

methods: {
  showChannel(val) {
    console.log(val);
  }
}

我正在尝试在 Quasar 2 中触发一个简单的通知：

setup() {
  const $q = useQuasar()
   $q.notify('hello')
}

这失败了：

Uncaught TypeError: $q.notify is not a function

这是一个 UMD 应用程序，没有这两行就可以正常工作 - 我真的不知道从哪里开始，因为文档说在使用它之前没有什么需要配置的。

notify()顺便说一句，我的 IDE在打字时会建议我$q.，因此至少在那个级别上它可以被很好地识别。

输入如此简单

<input ref="input" class="terminal-input" autofocus
  v-model="message" type="submit" @submit.prevent="printToConsole"/>

添加后type="submit"我无法再输入内容。它只是变成了一个按钮！所以我找到了一个解决方案，只需制作一个表单，添加一个按钮（使其提交）并隐藏该按钮。

 <form>
      <input ref="input" class="terminal-input" autofocus v-model="message"/> 
      <q-btn type="submit" @click="printToConsole" v-show="false"/>
 </form>

我可以以某种方式做到这一点，但只需要输入吗？（所以没有隐藏按钮的东西）

q-input 组件的尺寸相当大，具有相当数量的填充和相当大的字体。我在文档中没有看到任何可以使它们变小的内容。我特别希望降低这些组件的高度，但任何能够改变尺寸的策略都是合适的。

我正在使用Quasar构建我的 Vue 应用程序，并且我想使用q-input.

我创建了一个名为VInput.vue我的基本组件的 SFC，它看起来像这样：

<template>
  <q-input
    outlined
    class="q-mb-md"
    hide-bottom-space
  />
</template>

然后我创建了一个 SFC，名称TestForm.vue如下：

<template>
  <q-form>
    <v-input label="Email" v-model="email" />
  </q-form>
</template>

<script setup lang="ts">
import VInput from './VInput.vue';
import { ref } from 'vue';
const email = ref('john@example.com');
</script>

这些label="Email" v-model="email"部分被传递到我的VInput.vue基础组件并在页面上正确呈现。

q-input但基础组件上存在打字稿错误，VInput.vue因为q-input需要 v 模型：

`Type '{ outlined: true; class: string; hideBottomSpace: true; "hide-bottom-space": boolean; }' is not assignable to type …

我使用 Pinia 进行状态管理，并且我希望刷新页面时状态保持不变。

我知道有两个选择：

1. 使用插件。Vuex 有一个vuex-persistedstate插件，Pinia 有一个类似的插件，但仍在开发中。

2. 使用本地存储。幸运的是，Quasar 有一个LocalStorage 插件，在这里使用它会很好。但我不确定如何将它与 Pinia 集成，这就是这篇文章的原因。

我发现一个很好的教程，用 Pinia + Vueuse做了类似的事情。

我尝试使用 Pinia + TypeScript + Quasar LocalStorage 插件来适应我的需求，如下所示：

import { User } from 'firebase/auth';
import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';

type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> };

export const useUserStore = defineStore('user', {
  state: () => ({
    // user: {} as CreateMutable<User>, // This was …

这是我第一次使用quasar，我根据文档（https://quasar-framework.org/guide/app-installation.html）使用Quasar CLI创建一个项目

? quasar init quasar_demo
 Running command: vue init 'quasarframework/quasar-starter-kit' quasar_demo


? Project name (internal usage for dev) quasar_demo
? Project product name (official name) Quasar App
? Project description A Quasar Framework app
? Author
? Check the features needed for your project: ESLint, Vuex, Axios, Vue-i18n, IE11 support
? Pick an ESLint preset Standard
? Cordova id (disregard if not building mobile apps) org.cordova.quasar.app

上面的最后一条命令告诉我输入Cordova ID，这是什么Cordova id，我在哪里可以得到它？

我试图打破这段代码[A](见底部小提琴):

  <div class="q-uploader-files scroll">
      <q-item
        v-for="file in files"
        :key="file.name"
      >
        <q-progress :percentage="file.__progress"/>
        <div>
          {{ file.__progress }}%
        </div>

        <q-item-side v-if="file.__img" :image="file.__img.src">
        </q-item-side>
        <q-item-side right>
          <q-item-tile
            :icon="file.__doneUploading ? 'mdi-done' : 'mdi-clear'"
            :color="file.__doneUploading ? 'primary' : 'color'"
            @click.native="__remove(file)"></q-item-tile>
        </q-item-side>
      </q-item>
    </div>

进入[B]基本相同的代码,然后使用子组件.在这里父母:

<div class="q-uploader-files scroll">
  <my-uploader-progress
    v-for="file in files"
    :file="file"
    :key="file.name"
    :color='color'
  >
  </my-uploader-progress>
</div>

这里的孩子:

<template>
  <q-item>
    <q-progress
      :color="file.__failed ? 'negative' : 'grey'"
      :percentage="file.__progress"
    />
    <div>
      {{ file.__progress }}%
    </div>

    <q-item-side v-if="file.__img" :image="file.__img.src"/>
    <q-item-side v-else icon="mdi-file" :color="color"/>
    <q-item-main :label="file.name" :sublabel="file.__size"/>

    <q-item-side right> …

我尝试使用Jest与VueJS和Quasar framework。我写了一个简单的测试：

import { GetUserDictionaryDataComponent, Component } from '@/pages/configurations/components/';

describe('GetUserDictionaryDataComponent', () => {
  it('should get correct type', () => {
    const component = new GetUserDictionaryDataComponent(undefined);
    expect(component.getComponentType()).toBe(Component.LEAF);
  });
});

但它不能正常工作。当我尝试运行我的测试时，出现错误：

Test suite failed to run

    Configuration error:

    Could not locate module @/pages/configurations/components/ mapped as:
    /home/user/git/my_project/client/src/pages/configurations/components/.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/home/user/git/my_project/client/src/$1"
      },
      "resolver": null
    }

    > 1 | import { GetUserDictionaryDataComponent, Component } from '@/pages/configurations/components/';
        | ^
      2 | …