2021年1月

为什么需要开发环境

因为生产环境和开发环境的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),
          ....
        }
      }
    },

w3c手册

这里参考的是

10.5 Content height: the height property

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无法生效因为这个问题

问题推演

警告:这里我只是简单对着大佬的博客进行了一个梳理和学习,实际的内部机制可能更为复杂!

假设现在有顶级,父级,子级

如果要使上级的百分比高度流入下级,那父级根据w3c规定必须具有一个设定的高度

在第三级有固定高度height:100%,第一级也具有固定的高度

但是由于第二级设定的是 flex-grow:1

第二级没有设定固定的高度,导致webkit第二级的高度对于第三级是缺失的

早期的Chorme和Firefox都有类似的反馈

但是现在根据更新Firefox和Chorme都已经接受了以父级的弹性高度作为子级的百分比高度作为参考

解决方案

在flex-grow:1加上flex:1 1 0

主要问题的解决方案在于flex-basis上

当flex-basis为auto的情况下,使用弹性高度的元素的高度根据其内容高度来决定,flex-grow分配剩余的空间,但是这是一个伪分配,flex-grow是一个最小的高度

当flex-basis为0的情况下,会将剩余空间给弹性高度的元素,来增加高度

问题来源

这里的问题来源我认为是苹果完全遵守W3C规则导致子元素无法获取弹性高度的父元素高度的问题。

相信随着逐步的改进,会修复这个问题(可能这是我的问题?)

参考链接

https://ruirui.me/2018/12/07/flex-grow-child-not-filling-height-of-parent/

https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

在main.js内写入
import 'element-ui/lib/theme-chalk/display.css';
使用的时候如
在div上写class='hidden-sm-and-up'
同时还有
包含的类名及其含义为:

    hidden-xs-only - 当视口在 xs 尺寸时隐藏
    hidden-sm-only - 当视口在 sm 尺寸时隐藏
    hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
    hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
    hidden-md-only - 当视口在 md 尺寸时隐藏
    hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
    hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
    hidden-lg-only - 当视口在 lg 尺寸时隐藏
    hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
    hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
    hidden-xl-only - 当视口在 xl 尺寸时隐藏