Qing 发布的文章

问题复现

这时div并没有占满

075709rbzi60jm0fcfbboc.png
081144ocz8zqgi3jaqz8ik.png

问题分析

这里是本人参考网络资料得出的结论,由于编程和英语能力薄弱可能存在问题,希望大佬们多多指教

博客大概得出的结论咋https://bbs.tampermonkey.net.cn/thread-205-1-1.html

这里的问题是body没有高度,所以现在的代码图是

075938uzrb99in7e4g769i.png

根据w3c手册所述

percentage

Specifies a percentage height. The percentage is calculated with respect
to the height of the generated box's containing block. If the height of
the containing block is not specified explicitly and this element is
not absolutely positioned, the value computes to auto.

auto

The height depends on the values of other properties.

百分比

如果指定高度百分比。则百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度,并且此元素未绝对定位,则该值将计算为“auto”。

自动

高度取决于其他属性的值。

我们flex-grow无法生效因为这个问题

div虽然设定了100%的高度,由于body没有设定高度,所以div变成了height:auto

080233f1jbr5ps4ip3z5sj.png

所以这时div的高度是块内所有高度的高度,而body就是div的高度

引入flex布局

那flex布局是为什么?

设置flex-basis又为什么好使?

flex-basis: auto 表示项目的本来大小,当设置为 auto 时会根据主轴方向检索该 flex-item 的 width 或 height 值作为 flex-basis 的值。如果 width 或 height 值为 auto,则 flex-basis 设置为 content,也就是基于 flex 的元素的内容自动调整大小。

flex-basis: 0 相当于指定了宽度或高度(由主轴方向决定)为 0。

当我们只设置flex-grow:1的时候

flex-basis为auto

会以内部元素的高度作为大小

而内部元素设置为了height:100%,变成了height:auto ,以内部元素内的内容作为高度

而设置了flex-basis为0的时候

指定了高度为0,此时的flex-grow自动占满空间

内部元素的height:100%会跟随上级的flex空间自动占满

这个bug是早期Firefox和Chorme都有存在,现在只有苹果的浏览器存在了,原因是因为严格遵守W3C标准

由于本人技术薄弱,可能存在有事实的出入,如果文章存在事实性错误希望大佬多多指教

方法2 dot-env

大概测试了下,不知道是我个人问题还是配置问题,无法再quasar.config.js读取到env环境配置,所以又找到了这个方法,使用如下

安装

npm install — save-dev dotenv

配置文件

在src下创建config文件夹新建envparser.js文件

输入以下代码


const DotEnv = require('dotenv')
const parsedEnv = DotEnv.config({ path: `.env.${process.env.NODE_ENV}` }).parsed

module.exports = function () {
  return parsedEnv
}

引用

在quasar.config.js引入 const envparser = require('./src/config/envparser.js')

然后在build内添加env:envparser()


    build: {
      env: envparser(),
      vueRouterMode: "hash", // available values: 'hash', 'history'
  
      // transpile: false,

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: false, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://quasar.dev/quasar-cli/handling-webpack
      extendWebpack(cfg) {}
    },

大功告成,参考文章

https://ithelp.ithome.com.tw/articles/10246881

https://dev.to/jotcomponents/how-use-env-files-in-quasar-1k55

在外部添加一个QField

              <q-field
                ref="toggle"
                :value="AgreeRadio"
                :rules="[
                  val => (val == true) || 'RadioText'
                ]"
                borderless
                dense
              >
                <template v-slot:control>
                  <q-checkbox
                    v-model="AgreeRadio"
                    label="RadioText"
                  />
                </template>
              </q-field>      
              

为什么需要开发环境

因为生产环境和开发环境的api常常是分离的,如果改代码非常麻烦,所以通常会设置文件,自动根据运行判断使用的地址,quasar基本找不到什么中文资料,所以经过查询大概总结了一个方法

如何使用

在命令行输入

quasar ext add @quasar/dotenv

我们使用的是@quasar/dotenv

关于完整的使用帮助可以参考https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenv

@ quasar / quasar-app-extension-dotenv是 Quasar CLI App Extension流行的dotenv软件包的官方版本

将会回答一下问题

"What is the name of your .env that you will be using for development builds?"
用于开发构建的名称是什么
.env.development

"What is the name of your .env that you will be using for production builds?"
用于生产构建的名称是什么
.env.production

"What name would you like to use for your Common Root Object ("none" means to not use one)?"
你想使用的常用根对象名称是什么,none代表不使用
The "common root object" means off of "process.env" you will have a named object, basically for organization purposes.
常用根对象代表不属于process.env 你将有一个名称对象,用于组织属性
none

"Create your .env files for you?"
是否为您创建.env文件
yes

"For security, would you like your .env files automatically added to .gitignore?"
为了安全,是否为您在.gitignore中自动忽略.env文件
yes

然后.env.production和.env.production会自动加入到文件目录中

# This is your .env file
这是你的env文件
# The data added here will be propagated to the client
数据在这里填写将自动添加到属性中
# example:
# PORT=8080
在这里我们可以添加属性
VUE_TER_VERSION=0.01

附注
Then it will be accessible via process.env.APP_PORT or if you have a common root object of MyData then it will be process.env.MyData.APP_PORT
如果你有一个明为MyData的常用根对象,你可以通过process.env.MyData.APP_PORT访问

如何卸载

使用以下命令


quasar ext remove @quasar/dotenv

其实quasar自带就有别名
Quasar带有一些预先配置好的Webpack别名。 您可以在项目中的任何位置使用它们,webpack将解析为正确的路径。
src /src
app /
components /src/components
layouts /src/layouts
pages /src/pages
assets /src/assets
boot /src/boot
可以参考http://www.quasarchs.com/quasar-cli/handling-webpack/#Webpack%E5%88%AB%E5%90%8D
如果还是想自己配置,可以在quasar.conf.js
let path = require('path')

      // extractCSS: false,
      // useNotifier: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        })
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          '@components': path.resolve(__dirname, './src/components'),
          '@helpers': path.resolve(__dirname, './src/helpers'),
          '@module1': path.resolve(__dirname, './src/domains/module1),
          ....
        }
      }
    },