vue开发问题记录

GIt提交，无法检测到文件名称大小写的更改
解决：在当前项目中执行命令 git config core.ignorecase false
导出xlsx格式文件时，注意导出后：string类型字段默认会左对齐，number类型字段默认右对齐
vue中禁用多选框checkbox，加上 @click.native.prevent 即可解决，阻止默认行为，disabled 框会变灰
new Array(3).fill([]) 如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象
ElementUI的el-table组件自适应宽度，在父元素display属性为flex时，会出现宽度一直增加的现象
解决：参照网上，或不使用flex布局
vue项目启动报错corejs的相关问题，可能是版本不兼容问题
解决：npm install core-js@2
JPEG是图像文件中的一种类型（格式），该类型的图像文件后缀名可以包含：JPEG 、JPG 、JPE 、JFIF 。所以图像的MIME类型中不会有：image/jpg，有的只是：image/jpeg
ElementUI日期框组件回显日期时，可能会出现回显正确但重新选择后日期未改变的情况
原因：回显赋值时，数据层级嵌套过深
解决：采用this.$set()赋值
小程序跳转页面传参，采用？拼接参数的形式时，传递对象肯定会采用JSON.stringify()转成字符串进行传值
注意：① URL最大长度2048个字符（同GET请求）；
② 若转义的对象中有\转义字符，需使用encodeURIComponent重新编码，在接收页面用decodeURIComponent再进行解码
ElementUI如果一定要使用v-if来实现切换效果，
注意：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
ElementUI表单校验，一个页面用了两个el-form。两个都写了校验，即每一个form-item都写了prop，但是form1有一个没有写。结果怎么提交都不对。
解决：把form1的prop都加上就解决啦，没有指定校验规则的也必须加上，必须在rules里面声明一个空的。
在flex布局下，容器内的项目采用自撑开，在项目总宽度超出容器宽度时，项目宽度会自动收缩，且此时设置宽度也不起作用

原因：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

解决：将项目的flex-shrink属性设置为0
ElementUI表单验证只有在设置required: true时才会在校验项前面显示红色的星号，如果是自定义校验且不能设置required: true，还想要红色星号，除了手动写css外，最简单的做法，在当前校验项直接添加class="is-required"
axios请求为post类型时，参数中无data字段时，headers里的Content-Type无效果，这应该出于优化的层面，此时的Content-Length=0，无需向服务端提供Content-Type字段。
vant覆盖组件样式写法为： ::v-deep
清理定时器可以如下，采用程序化的事件侦听器的做法：

methods:{
     fun(){
         const timer = setInterval(()=>{
             // TODO
         },1000);
         this.$once('hook:beforeDestory', () => {
             clearInterval(timer);
             timer = null;
         })
     }
 }

fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效。
解决方法：使用transform样式的元素，不要包含fixed定位的子元素。
a、li等标签中使用img后的高度多了4px

原因：img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘

解决：
- 1）将图像定义成img:{display:block;}
- 2）给父级设置固定高度，然后 overflow:hidden
- 3）设置 font-size:0;
- 4）设置 img 的 vertical-align: bottom;
- 5）设置 img 的 margin-bottom: -4px;
appendChild() , insertBefore()插入节点需注意的问题：如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。
document.getElementById 和 document.querySelector的区别:
- 1）querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]
- 2）querySelectorAll 方法接收的参数是一个 CSS 选择符，类似jq。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name
- 3）querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。前者是快照，在之后再添加新的元素，不会影响已查询的结果；后者可以理解为一个仓库地址，查询出来的东西每次是不确定的，会跟随你之后的节点操作而动态改变。
assets文件夹与static文件夹的区别：

assets文件是src下的，所以最后运行时需要进行打包，assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。而模块是不可以直接用绝对路径来使用的，需要使用import或require先引入一下，才可以使用。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
在package.json文件里有两个属性，一个是dependencies，另一个是devDependencies。前者适用于生产环境，后者适用于开发调试环境。有哪些包是install到dependencies？又有哪些包是install到devDependencies？
发布后还需要用到的安装到dependencies，如axios；只在开发环境用到的安装到devDependencies，如babel。