标签: quasar-framework

我有一个名为“quasar.styl”的文件：

@import './quasar.variables'
@import '~quasar-styl'

当它被 webpack 使用 styl-loader 处理时，我收到以下错误：

failed to locate @import file ~quasar-styl.styl

我有这种感觉，关于手写笔有些东西我不明白。它会在哪里寻找文件“~quasar-style”？

该文件来自一个正在运行的样板类星体应用程序，并且应用程序目录中的任何位置都没有调用的文件quasar-style，尤其是node_modules，这是我收集波浪号告诉它要查看的地方。

有任何想法吗？

更新：我在这里上传了类星体样板项目： https ://repl.it/@jmbldwn/Quasar-Boilerplate-2

它无法在 repl.it 上运行，因为它需要 quasar-cli，但您可以在那里看到它生成的所有文件。

在http://quasar-framework.org/中，我有几个共享相同布局的屏幕，例如产品和客户列表。

但是，我不知道如何将数据从页面传递到其布局。例如，布局有一个标题，我希望根据显示的页面来更改它：

//Routes:
  {
    path: '/orders',
    component: () => import('layouts/list'),
    children: [
      { name: 'pickCustomer', path: '/customer', component: () => import('pages/CustomersList') },
      { name: 'pickProducts', path: '/products/:customer_id', component: () => import('pages/AddProductsList') },
      { name: 'addProduct', path: '/addproduct/:order_id/:product_id', component: () => import('pages/AddProductsList') },
      { name: 'confirmOrder', path: '/confirm/:order_id', component: () => import('pages/AddProductsList') }
    ]
  }

//list.vue
    <template>
      <q-layout>
        <q-layout-header>
            <q-toolbar>
            <q-btn
                flat
                round
                dense
                icon="chevron_left"
                @click="leftDrawer = !leftDrawer"
            />
            <q-toolbar-title>
                {{title}}
            </q-toolbar-title>
            <q-btn flat round dense icon="save" label="Add" /> …

我的 Quasar 应用程序中遇到了有关浏览器刷新和 Firebase 身份验证的问题。

在用户登录并点击浏览器刷新后，firebase.auth().currentUser 返回 null（因为它是异步执行的）。这意味着当 beforeEach 被执行时，currentUser 为空并且用户被提示登录页面。但是我看到当 onAuthStateChanged 的​​回调被调用时，用户被正确设置。

在 Quasar 应用程序中，是否有任何模式可以在导航过程中使用 onAuthStateChanged 以便重用现有用户会话？

// Vue-router => index.js

firebase.auth().onAuthStateChanged(user => {
  console.log('onAuthStateChanged Invoked => ' + user);
});

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser; 
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    next('signin');
  } else {
    if (requiresAuth && currentUser.emailVerified === false) {
      next('signin');
    } else {
      next();
    }
  }
});

我一直在iOS上苦苦挣扎，想在Android上轻松工作：让我的PWA在有新版本时自动更新。我完全不确定在iOS上是否有可能。我已经使用vue.js和Quasar来构建我的应用程序，并且一切在Android上都是开箱即用的。这是当前iOS版本上的情况（难看，糟糕）：

1. 我可以检查自己的服务器的版本，并将其与存储在我的应用程序（在indexedDB中）中的当前服务器进行比较，并发出一个通知，指出有一个新版本。到目前为止，一切都很好。
2. 除了让用户手动清除SAFARI CACHE（!!）之外，我无法弄清楚如何从应用程序内以编程方式清除PWA缓存或以其他方式强制上载。

所以在这一点上，我想我的问题是：

1. 有新版本可用时，是否有人可以在iOS（11.3或更高版本）上获取PWA来自动更新？
2. 有没有办法从我的PWA中清除（Safari）应用程序缓存？

显然，要通知用户要进行更新，他们必须在应用程序外部执行几个步骤才能对其进行刷新，这是一种令人难以置信的糟糕用户体验，但是除非没有我遗漏的东西，否则这似乎是iOS当前所处的位置。有人在任何地方进行过这项工作吗？

如何在 quasar cli 生成的项目中安装 vuetify？

在使用 vue cli 的普通项目中只需要命令

vue add vuetify

但在 quasar cli 中我运行命令

npm install vuetify

并生成新的启动文件，但我在 sass 或 sass-loader 中出现错误

我使用以下命令安装了 quasar： \nnpm install -g @quasar/cli

然后我尝试使用 quasar 创建一个应用程序文件夹：\nquasar create callapp

该控制台在 Visual Studio Code（最新版本）中运行，具有管理员权限。我尝试过重新安装npm。\nnpm 版本 - 6.9.0\nnode 版本 - v11.13.0

安装类星体：

PS C:\\Users\\Daniels> npm install -g @quasar/cli\nnpm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)\nnpm WARN rm not removing C:\\Users\\Daniels\\AppData\\Roaming\\npm\\quasar.cmd as it wasn\'t installed by C:\\Users\\Daniels\\AppData\\Roaming\\npm\\node_modules\\@quasar\\cli\nnpm WARN rm not removing C:\\Users\\Daniels\\AppData\\Roaming\\npm\\quasar as it wasn\'t installed by C:\\Users\\Daniels\\AppData\\Roaming\\npm\\node_modules\\@quasar\\cli\nC:\\Users\\Daniels\\AppData\\Roaming\\npm\\quasar -> C:\\Users\\Daniels\\AppData\\Roaming\\npm\\node_modules\\@quasar\\cli\\bin\\quasar\n+ @quasar/cli@1.0.0\nupdated 1 package in 14.635s\n

创建应用程序：

PS C:\\Users\\Daniels> quasar create …

如何从Quasar V2 Composition API设置功能访问配置axios的启动文件，而不在每个文件中导入axios？

由于 this.$axios 只能用于Options API，所以我尝试通过setup函数的context参数来访问。

尽管它有效，但 context.root 现在在 Vue 3 中已被弃用。

我不想在每个文件中导入 axios，如https://next.quasar.dev/quasar-cli/ajax-requests中的示例所示

对于设置方法访问，我认为它仍然没有实现，因为在https://next.quasar.dev/quasar-cli/boot-files#examples-of-property-usage-of-boot-files中作为 TODO 活动提到

与 axios 类似，从引导文件中使用 vue-i18n 对我来说也是一个问题。

 setup (props, context) {
         
    context.root.$axios({
    method: 'get',
        url: 'http://localhost:8080/storemgr/item/3',
      }).then((response: any) => {
          console.log(response)
      }).catch((error: any) => {
        console.log(error)
      })
...
}

下面是我的由 Quasar V2 CLI 生成的 axios 启动文件内容

import axios, { AxiosInstance } from 'axios'
import { boot } from 'quasar/wrappers'

declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance;
  }
}

export …

我正在努力弄清楚我做错了什么才能让 TypeScript 理解它props.user的类型UserInterface，任何建议或指针都会很棒

vue@3.1.1、typescript@4.2.2、quasar@2.0.0-rc.3。这感觉更像是原生 VueJS 或 TypeScript 问题，而不是与 Quasar 有任何关系

参考用户界面：

export default interface UserInterface {
  id: number,
  email: string,
  name: string,
  agent_id: string
}

成分：

<template>
  <q-avatar :color="color" :text-color="textColor" :size="size" :title="user.name" style="outline: 2px solid #ffffff">
    {{ initials(user.name) }}
  </q-avatar>
</template>

<script lang="ts">
import UserInterface from 'logic/interfaces/UserInterface'
import {computed, defineComponent, PropType} from 'vue'

const colors: Record<string, string> = {
  A: 'blue',
  K: 'black',
  R: 'purple',
  S: 'primary'
}

export default defineComponent({
  name: 'UserIcon',
  props: {
    user: …

我为我的 quasar pwa 创建了一个服务工作人员来管理 fcm Web 后台通知。目的是管理前台和后台通知的点击并将用户重定向到我的 PWA 的特定页面。

因此，当我收到通知时，我有两种情况：

前台通知：

• 1a) 浏览器聚焦/最大化 + 用户已经在 PWA 选项卡上 + PWA 位于右侧页面 -> 无需执行任何操作
• 1b) 浏览器聚焦/最大化 + 用户已经位于 pwa 选项卡上 + pwa 位于另一个页面上 -> 我必须重定向到特定的 pwa 页面

后台通知：

• 2a) 浏览器未聚焦或最小化，或者用户不在 PWA 选项卡上 + PWA 位于右侧页面 -> 我必须聚焦/最大化浏览器或聚焦 PWA 选项卡，然后无事可做
• 2b) 浏览器未聚焦或最小化，或者用户不在 PWA 选项卡上 + PWA 在另一个页面上 -> 我必须聚焦/最大化浏览器或聚焦 PWA 选项卡，然后重定向到特定的 PWA 页面

1a、1b 和 2a 中一切正常。对于 2b，我收到这个奇怪的错误“此服务工作线程不是客户端的活动服务工作线程”。

我在服务工作人员中有以下代码来管理后台通知单击时的重定向。我在navigate()方法上收到错误。

self.addEventListener('notificationclick', function(event) {
    console.log('notificationclick', event);
    event.notification.close();

    let route …

我正在尝试从 Quasar 项目中的普通 .js 文件访问路由器，但我无法做到。我搜索了如何在 vue 中执行此操作，人们似乎Router从 导入对象/src/router/index，如下所示：import { Router } from 'src/router/index'。

但 Quasar 不公开对象Router，而是公开一个调用的函数route，该函数接受另一个函数作为返回该对象的参数Router。

export default route(function (/* { store, ssrContext } */) {
    const createHistory = process.env.SERVER
        ? createMemoryHistory
        : process.env.VUE_ROUTER_MODE === 'history'
        ? createWebHistory
        : createWebHashHistory;

    const Router = createRouter({
        scrollBehavior: () => ({ left: 0, top: 0 }),
        routes,

        // Leave this as is and make changes in quasar.conf.js instead!
        // quasar.conf.js -> …