标签: quasar-framework

我们有一个基于 Quasar 2 的项目，它使用 vue-i18n 来本地化字符串，但遇到了一个问题，即带有替换令牌的字符串在我们的开发主机和生产部署中无法得到正确处理。

在我们的语言文件中：

export default {
  'label.deleteUserConfirm': 'Saisissez le {personId} pour confirmer la suppression'
}

在我们的 Vue 文件的模板部分中：

<template>
  <div>
    {{ $t('label.deleteUserConfirm', { personId: '12345' }) }}
  </div>
</template>

在本地主机中运行时显示的文本是：

Saisissez le 12345 pour confirmer la suppression

在我们的部署中

Saisissez le {personId} pour confirmer la suppression

根据@intlify/vite-plugin-vue-i18n 的文档，我们确实尝试compositionOnly: false在 中指定quasar.conf.js，但这似乎没有产生任何影响。

我们正在使用 Vite 构建我们的项目。查看该dist/spa文件夹，我们没有看到任何字符串损坏的证据，因为它们出现在资产文件夹的 js 中。

的结果quasar build显示了这个问题，而开发版本运行的结果却quasar dev没有。这是 SPA 目标。

环境信息：

• vue-i18n 9.2.2
• 2015年9月2日
• @intlify/vite-plugin-vue-i18n …

我已经开始了一个全新的 Quasar CLI 项目，我想以我习惯的方式使用 Pug：在我的lang="pug"一些 .vue 文件中加入一个标签：

<template lang="pug">
  q-page(class="flex flex-center")
    p Well hello there
...

这会引发此错误：

组件模板需要一个根元素，而不仅仅是文本

Quasar给出的建议是添加这个配置：

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

但这前提是我所有的 pug 文件都在名为 的文件中.pug，这不是我的偏好。

有没有办法lang="pug"在我的 vue-cli 项目中像往常一样工作？

Quasar CLI........ v0.17.24

Quasar 框架.. v0.17.20

我在页面中放置了一个 q 表来显示我的数据。这是正确工作的。我想在第一列中放置一个 href，在最后一列中放置另一个 href。您应该可以单击它们转到其他页面，分别显示详细信息行和编辑行。

标题：转到页面/#/offer/uuid

编辑：转到页面 /#/account/offers/edit/uuid

    <template>
      <q-page>
        <div class="row justify-center">
            <q-table
              :data="data"
              :columns="columns"
              row-key="id"
              selection="single"
              :selected.sync="selected"
              :filter="filter"
              :loading="loading"
            >
            </q-table>
          </div>
        </div>
      </q-page>
    </template>

<script>
.....
columns: [
        {
          name: 'title',
          required: true,
          label: 'Title',
          align: 'left',
          field: row => row.title,
          sortable: true,
          format: val => '<a href="/offer/">' + val + '</a>' //this is not work
        },
        {
          name: 'category',
          label: 'Category',
          field: 'category',
          sortable: true
        },
        {
          name: 'payment',
          label: 'Payment',
          field: 'payment'
        },
        {
          name: …

我遇到的问题是，由 . 创建的生产版本npm run build与 . 提供的开发版本不同npm run serve。生产中生成的 CSS 与开发中生成的 CSS 不同。

背景

由于标准的变化，使用 Vuetify 框架开发的现有应用程序的某些部分需要迁移到 Quasar。Vuetify 首先使用安装vue-cli。类星体是后来使用添加的npm。应用程序处于多页面模式。

问题

通过查看页面时npm run serve，已迁移到Quasar的页面会正确显示。但是，当尝试通过 将其部署到生产中时npm run build，相同的页面会中断。页面中的所有间距和边距均已关闭。检查生成的 CSS 后，发现某些 CSS 类被覆盖为 Vuetify 的值。

我尝试将每个页面的块分开，但无济于事。

以下是我的片段vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : '/',
  outputDir: '../flask/web/static/dist',

  transpileDependencies: ['quasar', 'vuetify'],

  pages: {
    dashboard: { // vuetify page, no problem.
      entry: 'src/pages/dashboard/index.js',
      template: 'public/index.html',
      filename: 'dashboard.html',
      title: 'Dashboard', …

这是我用 Quasar 创建的表的简单模板。

:class="\'(props.value < 1000) ? bg-red : bg-green\'"\n我无法根据数字条件为每个单元格着色，并且它一直为假（在这种情况下，每个单元格都会触发 bg-green ）。我检查了所有单元格typeOf都是number.

<template>\n  <div class="q-pa-sm">\n    <q-table\n      ref="mainTable"\n      class="my-sticky-virtscroll-table"\n      style="height: 800px"\n      :data="data"\n      :columns="columns"\n      row-key="name"\n      :selected-rows-label="getSelectedString"\n      selection="multiple"\n      :selected.sync="selected"\n      virtual-scroll\n      :pagination.sync="pagination"\n      :virtual-scroll-sticky-size-start="48"\n      :rows-per-page-options="[0]"\n      :filter="filter"\n      flat\n      bordered=""\n      @focusin.native="activateNavigation"\n      @focusout.native="deactivateNavigation"\n      @keydown.native="onKey"\n    >\n      <template v-slot:top-left>\n        <q-input\n          ref="mainSearchInput"\n          debounce="10"\n          v-model="filter"\n          label="B\xc3\xbasqueda"\n          filled\n          bottom-slots\n          clearable=""\n          style="width:500px"\n        >\n          <template v-slot:hint\n            >Puede hacer busquedas online con commandos.</template\n          >\n        </q-input>\n      </template>\n\n      <template v-slot:body-cell-qty="props">\n        <q-td :props="props">\n          <q-badge\n            :class="\'(props.value < 1000) ? bg-red : bg-green\'"\n            :label="props.value"\n …

我有一个 Quasar 应用程序，我想在以下场景中使用 keep-alive 缓存某些页面：用户从主页导航到第 1 页，然后从第 1 页用户导航到第 2 页，然后用户使用 $router.back 返回() 从第 2 页到第 1 页，在当前场景中，mounted() 钩子在第 1 页中再次运行，并且页面重新渲染，进行另一个完全没有必要的 API 调用。我当前的实现如下所示：

  <q-page-container class="overflow-auto">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </q-page-container>

我已经在路线和页面本身中设置了名称属性。我也尝试使用 include="Home,Workout" 但结果是相同的，安装的钩子每次都会运行并且页面会重新渲染。我还需要页面保持活动状态，以便我可以更改滚动行为，滚动回用户之前所在的位置left Page 1. 这被记住了，我可以看到控制台日志，例如显示y:883，但由于页面被重新渲染，它再次出现在顶部。值得一提的是，我正在使用路由器哈希模式？

我是一名业余开发人员，编写了一些家庭使用的应用程序。我前端使用Quasar框架，后端使用Python。

我有一个 git 存储库，其中master保存了我的“生产代码”，我想尝试新版本的 Quasar（使用 Vue 3）。

我主要关心的是如何处理这个新框架将带来的新依赖。

该框架是通过 引导的quasar create testvue3 --branch next，它可以执行各种神奇的事情，包括安装npm库。

我的理解是这些库进入node_modules，它没有签入（它在.gitignore）。

我的问题：当涉及到依赖项时，我应该如何在master和分支（我将重新引导我的前端的分支）之间切换？v2

• 我应该入住吗node_modules？
• 或者npm install切换分支时？
• 或者是其他东西？

注意：建议将“node_modules”文件夹包含在 git 存储库中作为重复文件夹。虽然它具有非常有用的信息，但它并没有回答我关于如何处理不同分支的问题（特别是如何在它们之间切换并恢复正确的环境，库方面）

我想在单击 q 对话框时模糊背景。知道该怎么做吗？

I\xc2\xb4m 尝试让 Webpacks DevServer HMR 功能在我的设置上工作。它看起来像这样：

\n
• QuasarJS CLI 在本地 Docker 容器中为 MYAPP 运行 Webpack DevServer
\n
• 通过ngrok隧道访问Docker容器
\n

码头工人港口

0.0.0.0:8201->8201/tcp\n

恩格罗克配置：

Forwarding   https://MYAPP.ngrok.io -> http://localhost:8201 \n

Webpack DevServer 配置（Webpack 版本：5.59.1）

0.0.0.0:8201->8201/tcp\n

在 Chrome 浏览器开发工具中，我可以看到 MYAPP 正在尝试连接到本地 DevServer 但没有成功：

WebSocket connection to \'wss://MYAPP.ngrok.io:8201/ws\' failed:\n\nWebSocketClient @   WebSocketClient.js?8f51:13\ninitSocket  @   socket.js?d11d:15\neval    @   socket.js?d11d:34\n

有人有什么想法吗？

是否可以仅使用 javascript（作为对象）而不是在模板中使用 vue、vue-i18n？

在 src/boot/i18n.js 中

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: 'es-CO',
    fallbackLocale: 'en-US',
    globalInjection: true,
    messages
  })

  // Set i18n instance on app
  app.use(i18n)
})

但我创建了一个 src/support/errors 和 utils，以及更多扩展文件，我需要插入消息但可以访问 i18n。

在此输入图像描述

我是西班牙人，是 quasar vue 的初级学生，所以请帮助我

谢谢。