标签: quasar-framework

Quasar:用开发模式构建

我在 quasar.conf.js 环境设置中有这样的内容:

env: {
  API_URL: ctx.dev
    ? 'https://dev.apis.test.io/v2/'
    : 'https://apis.test.io/v2/'
}
Run Code Online (Sandbox Code Playgroud)

当我在本地主机上运行应用程序时,使用开发 API,当我运行quasar build生产 API 时,使用它。所以这是有效的。如何使用开发环境设置进行构建?

例如,在普通的 Vue 上yarn build --mode development就可以正常工作。我怎样才能对类星体做同样的事情?

我试过:

quasar build --mode development

quasar build --mode dev

quasar build --development

quasar build --dev

quasar build --debug

我总是在 dist 文件夹文件中获得生产链接

environment-variables vue.js quasar quasar-framework

4
推荐指数
1
解决办法
4278
查看次数

Quasar 在开发服务器启动时更改 Capacitor.config.json

在电容模式下运行 Quasar 开发服务器quasar dev -m capacitor -T android结果出现在选择外部 IP 地址的对话框中:

\n
? What external IP should Quasar use? 192.168.0.3\n App \xe2\x80\xa2 Updated src-capacitor/package.json\n App \xe2\x80\xa2 Updated capacitor.config.json\n App \xe2\x80\xa2 Running "...\\node_modules\\@capacitor\\cli\\bin\\capacitor sync android" in ...\n
Run Code Online (Sandbox Code Playgroud)\n

问题是,这会src-capacitor/capacitor.config.json使用可能意外推送的本地信息进行更新,这是永远不可取的:

\n
  "server": {\n    "androidScheme": "https",\n    "url": "http://192.168.0.3:9500" <-- this line is added\n  }\n
Run Code Online (Sandbox Code Playgroud)\n

更不用说大多数时候跳过此对话框是很实用的,因为应用程序在本地运行并且可以安全地使用 localhost 而不是外部 IP。

\n

正如文档中粗略描述的那样,这似乎是预期的行为,但不是理想的行为。

\n

如何server.url避免更新 Capacitor.config.json?

\n

devserver quasar-framework capacitor

4
推荐指数
1
解决办法
425
查看次数

Quasar VUE_PROD_HYDRATION_MISMATCH_DETAILS 未定义

我将 quasar 与 Vite 一起使用。安装 quasar 后,yarn create quasar 我在控制台中收到以下警告。

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
 You are running the esm-bundler build of Vue, which expects these 
compile-time feature flags to be globally injected via the bundler 
config in order to get better tree-shaking in the production 
bundle.
Run Code Online (Sandbox Code Playgroud)

我怎样才能摆脱它?我找不到任何关于在 Quasar Framework 中定义它的信息

javascript vue.js quasar-framework vuejs3 vite

4
推荐指数
1
解决办法
1967
查看次数

移动设备上的边距/填充 - Quasar Framework (VueJS)

spacing当我希望它具有响应能力时如何使用。例如,我想设置 marging q-ma-md,但我希望仅当它是手机时才设置。那么如何做到这一点呢?

在此样式中,q-ma-mdmd 表示边距值,而不指定屏幕宽度。

vue.js quasar vuejs2 quasar-framework

3
推荐指数
1
解决办法
7441
查看次数

在类星体框架中存储全局对象的位置

我正在使用基于Vue 的Quasar Framework重写我的旧应用程序,并且我有一段代码(类)封装了 websocket 功能。

这是一个相当简单的概念:用户在应用程序中从一个页面到另一个页面,但是如果他收到一条消息,他可以看到一条 toast 消息/回复或一个unread messages增量计数器。

我有点迷失在Quasar( Vue) 架构中,这是我的问题:

只要应用程序存在并可从任何地方访问,我将在哪里存储与外部世界通信的全局对象?

我阅读了Quasar( Vue) 的文档,但我仍然不知道把它放在哪里。Vuex 看起来不对,因为它不是应用程序的状态。它更像是一个匿名组件。

这是否意味着我应该使用插件或Vue.prototype全局混合或其他东西?

如果有人可以分享他们的经验和一段描述如何初始化和访问此对象方法的代码,我将不胜感激。

vue-component vuex vuejs2 quasar-framework

3
推荐指数
1
解决办法
3953
查看次数

如何在 VUEJS 中的 v-on:click 或 @click 中的函数上传递变量?

我现在正在用 vuejs 开发一个系统。我想知道如何在 v-on:click 或 @click 中传递变量值?这是我的代码:

props.row 包含一个键为“_id”的对象,我想要做的是将它传递给函数“view”。

<q-td key="status" :props="props">
    <q-btn color="primary"  label="view" v-on:click="view({{props.row._id}})"  icon="remove_red_eye" /> 
</q-td>
Run Code Online (Sandbox Code Playgroud)

程序崩溃。

button vue.js quasar vue-component quasar-framework

3
推荐指数
1
解决办法
6874
查看次数

如何更改 quasar 框架中的图标?

如何更改 quasar 框架中的图标?我已经尝试更改hrefindex.template.html失败了

quasar-framework

3
推荐指数
1
解决办法
8459
查看次数

如何使用 vue/quasar 验证确认密码

我编写了一段代码来连接到 vue/quasar/C# 中的应用程序\n我刚刚开始使用 vue。我不明白规则是如何运行的。\n我写这个是为了检查密码/ConfimPassword 的输入不为空

\n
<q-form v-bind:submit="createUser"\n            v-bind:reset="resetCreateUser"\n            class="q-gutter-md"\n            v-if="status==2"\n            ref="frmCreateUser"\n            autofocus>\n         <q-input filled\n                 v-model="loginData.password"\n                 label="Votre mot de passe"\n                 hint="Saisissez votre mot de passe"\n                 v-bind:type="isPwd ? 'password' : ''"\n                 lazy-rules\n                 v-bind:rules="[ val => val && val.length > 0 || 'Saisissez votre mot de passe']"\n                 ref="fldPasswordCreateUser"\n                 data-vv-name="fldPasswordCreateUser">\n            <template v-slot:append>\n                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"\n                        class="cursor-pointer"\n                        v-on:click="isPwd = !isPwd"></q-icon>\n            </template>\n        </q-input>\n        <q-input filled\n                 v-model="loginData.passwordConfirm"\n                 label="Confirmez votre mot de passe"\n                 v-bind:type="isPwd ? 'password' : ''"\n                 lazy-rules\n                 v-bind:rules="[ val => val && …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js quasar-framework

3
推荐指数
2
解决办法
7170
查看次数

是否可以将 quasar 组件与 vuedraggable 一起使用?

我已经尝试完成这件事有一段时间了,但似乎无法让它发挥作用。我正在使用 Quasar CLI,如果有人可以向我展示如何执行此操作的示例,我将不胜感激。

<draggable v-model="myList" draggable=".item" tag="q-virtual-scroll">
</draggable>
Run Code Online (Sandbox Code Playgroud)

我尝试通过在 tag 属性中传递组件来使用类星体组件,但这似乎不起作用。因此,任何建议将不胜感激。

vue.js quasar-framework vuedraggable

3
推荐指数
1
解决办法
3239
查看次数

VUE - QUASAR - TIPTAP - 如何在编辑器的内部元素上设置 CSS 高度

如何使内部编辑器部分(用细蓝线突出显示)达到全高。这是由tiptap 编辑器创建的内部元素:

\n\n
<div contenteditable="true" tabindex="0" class="ProseMirror" spellcheck="false"> Editable content goes here./div>\n
Run Code Online (Sandbox Code Playgroud)\n\n

更新:

\n\n

我在渲染的输出中手动添加了类(\'col\' 和 \'column\'),现在它按照我想要的方式工作。有没有一种方法可以做到这一点而不必访问元素的类属性?

\n\n
<div contenteditable="true" tabindex="0" class="ProseMirror col column" spellcheck="false"> Content Here </div>\n
Run Code Online (Sandbox Code Playgroud)\n\n

这是我在类星体示例应用程序中使用的组件代码。我在编辑器周围的 div 中尝试了无数种不同的类变体。我所做的任何事情似乎都不会影响上面生成的“contenteditable”div 容器。

\n\n
<template>\n  <q-page class="column justify-start">\n      <div class="column col absolute-full bg-secondary">\n        <div class="col column editor">\n          <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">\n            <div class="menubar">\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.bold() }"\n                @click="commands.bold"\n              >\n                <icon name="bold" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.italic() }"\n                @click="commands.italic"\n              >\n                <icon name="italic" />\n              </button>\n\n …
Run Code Online (Sandbox Code Playgroud)

css vue.js quasar-framework tiptap

3
推荐指数
1
解决办法
4588
查看次数