vue报start value has mixed support, consider using flex-start instead”编译警告,在这里轻松解决!

本文介绍了在Vue项目开发中遇到的编译警告'(startvaluehasmixedsupport,considerusingflex-startinstead)'的问题分析及解决方法。通过理解警告内容,找到CSS代码中使用justify-content的地方,将属性值改为flex-start,从而消除警告。同时提醒开发者在使用CSS3盒子模型的justify-content属性时注意加上flex前缀以避免混淆。

前言

今日在进行项目开发的过程中,遇到编译警告异常,此警告虽然不会影响项目正常运行,但对于用心去开发的小伙伴们来说,在自己的项目中,不得存在一点错误,哪怕是一个警告,所以在这里我将帮助遇到这个问题的小伙伴们轻松解决这一问题。

警告异常分析

如下图,可以了解到这是一个警告异常,且异常内容为“start value has mixed support, consider using flex-start instead”即开始值有混合支持,考虑使用flex-start代替
在这里插入图片描述

解决方案

于以上经过分析,了解了异常问题的内容及相关位置,接下来就是找到问题并解决。
1.异常出现位置,如下图:
在这里插入图片描述
2.修改后,如下:
在这里插入图片描述
【温馨提示】在css3盒子模型中使用justify-content: flex-start水平居中属性时,需要加flex为了区分属性,防止混合。

结束语

本文章主要讲述了在vue项目开发中遇到的编译警告异常相关问题分析及解决方法,如有疑问或不足,欢迎小伙伴们留言讨论。

PS D:\All-Project\pointlion-ui\pointlion-ui> npm run dev > jscm@3.8.3 dev > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 10 warnings 15:19:24 warning in ./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (4:3) start value has mixed support, consider using flex-start instead @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss 4:14-509 15:3-20:5 16:22-517 @ ./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss @ ./src/views/wms/wmsGoods/selectMulGoodsStock.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/am/amBrowse/index.vue?vue&type=template&id=d81b321c&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-breadcrumb-item v-for="bread in breadList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/am/amBrowse/index.vue?vue&type=template&id=d81b321c&scoped=true 1:0-545 1:0-545 @ ./src/views/am/amBrowse/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/socialInsncData/index.vue?vue&type=template&id=4f54c0ed&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-card v-for="month in dataList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/socialInsncData/index.vue?vue&type=template&id=4f54c0ed&scoped=true 1:0-545 1:0-545 @ ./src/views/hrm/socialInsncData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-col v-for="item in type.salaryItemConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/staffEvaluate/index.vue?vue&type=template&id=4ae0f374&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-form-item v-for="item in dict.type.staff_evaluate_item">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/staffEvaluate/index.vue?vue&type=template&id=4ae0f374&scoped=true 1:0-545 1:0-545 @ ./src/views/hrm/staffEvaluate/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-table-column v-for="item in type.salaryItemConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-table-column v-for="type in salaryConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/am/amArchive/index.vue?vue&type=template&id=40c5f930 Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-tag v-for="item in (scope.row.groupId?scope.row.groupId.split(&#39;,&#39;):[])">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/am/amArchive/index.vue?vue&type=template&id=40c5f930 1:0-533 1:0-533 @ ./src/views/am/amArchive/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/workflow/flow/flowinfoTimeLine.vue?vue&type=template&id=0e1dc530&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-timeline-item v-for="item in hisList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/workflow/flow/flowinfoTimeLine.vue?vue&type=template&id=0e1dc530&scoped=true 1:0-556 1:0-556 @ ./src/views/workflow/flow/flowinfoTimeLine.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/im/pointlion-chat/iconfont/demo_index.html Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <!DOCTYPE html> | <html> | <head> @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js App running at: - Local: http://localhost:81/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. node:events:491 throw er; // Unhandled &#39;error&#39; event ^ Error: spawn cmd ENOENT at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (node:internal/child_process:485:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) Emitted &#39;error&#39; event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) at onErrorNT (node:internal/child_process:485:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) { errno: -4058, code: &#39;ENOENT&#39;, syscall: &#39;spawn cmd&#39;, path: &#39;cmd&#39;, spawnargs: [ &#39;/c&#39;, &#39;start&#39;, &#39;""&#39;, &#39;/b&#39;, &#39;http://localhost:81/&#39; ] } PS D:\All-Project\pointlion-ui\pointlion-ui>
最新发布
10-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值