Vue3 实际项目踩坑+总结【汇总篇】

目录

1、基础篇

2、组件篇

3、在子页面更改全局样式不生效?

4、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance.

5、遍历提示错误 'v-model' directives cannot update the iteration variable itself

6、input 每次输入一个字符后自动失去焦点

7、引入防抖和节流提升性能

8、实现全局的合并请求loading

9、v-model 变更

10、vue-cli 4.x 配置 htmlWebpackPlugin.options.title

11、复制到剪贴板

12、$set?

13、首屏渲染 loading

14、table表格为空时

15、输入框模拟验证码输入效果

16、表格的合并

17、使用路由router

18、忽略 ts 的无故报错

19、封装axios

20、Vue3 和 Vue2 在编写代码中的区别

21、报错


1、基础篇

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

2、组件篇

Vue3+ Vue-cli (2) 组件篇_小草莓蹦蹦跳的博客-CSDN博客

3、在子页面更改全局样式不生效?

在子页面中,更改全局样式,加上 !important 依旧不生效的原因?

1、去掉 style 标签的 scoped 属性

2、重点!!在写全局样式的时候,当前声明的局部样式表必须不能为空

只有这样子,更改全局样式才能生效

4、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance.

在确保初始化数据没问题的情况下,浏览器提示如下:

出现问题竟然是,初始化表单命名的问题

把 ruleForm 改成 formData 或者其它的,就可以了。。。

5、遍历提示错误 'v-model' directives cannot update the iteration variable itself

            <template v-for="item in formData.serviceList" :key="item + '1'">
                <div class="flex-row-start ip-list">
                    <el-input placeholder="请输入IP和端口" class="mr10" v-model.trim="item"></el-input>
                </div>
            </template>

解决方案: 

            <template v-for="(item, index) in formData.serviceList" :key="item + '1'">
                <div class="flex-row-start ip-list">
                    <el-input placeholder="请输入IP和端口" class="mr10" v-model.trim="formData.serviceList[index]"></el-input>
                </div>
            </template>


6、input 每次输入一个字符后自动失去焦点

vue input每次输入一个字符后自动失去焦点_vue中在输入框中输入值,同时按下其他按钮,需要先执行失去焦点中的异步代码,在执行_小草莓蹦蹦跳的博客-CSDN博客

7、引入防抖和节流提升性能

Vue3 引入防抖和节流提升性能_vue3 throttle_小草莓蹦蹦跳的博客-CSDN博客

8、实现全局的合并请求loading

Vue3 + Axios + Element-Plus 实现全局的合并请求loading_el-loading target_小草莓蹦蹦跳的博客-CSDN博客

9、v-model 变更

Vue3 v-model 变更_小草莓蹦蹦跳的博客-CSDN博客

10、vue-cli 4.x 配置 htmlWebpackPlugin.options.title

Vue3 + vue-cli 4.x 配置 htmlWebpackPlugin.options.title_vue3 htmlwebpackplugin.options.title_小草莓蹦蹦跳的博客-CSDN博客

11、复制到剪贴板

Vue3 复制到剪贴板_vue3复制内容到剪切板_小草莓蹦蹦跳的博客-CSDN博客

12、$set?

Vue3 $set?_vue3使用$set_小草莓蹦蹦跳的博客-CSDN博客

13、首屏渲染 loading

Vue3 首屏渲染 loading动画效果_app-loading-title_小草莓蹦蹦跳的博客-CSDN博客

14、table表格为空时

Vue3 + element-plus table表格为空时_小草莓蹦蹦跳的博客-CSDN博客

15、输入框模拟验证码输入效果

Vue3 输入框模拟验证码输入效果_小草莓蹦蹦跳的博客-CSDN博客

16、表格的合并

element-plus 表格单元格的合并_小草莓蹦蹦跳的博客-CSDN博客

17、使用路由router

Vue3 使用路由router_vue3 $router_小草莓蹦蹦跳的博客-CSDN博客

18、忽略 ts 的无故报错

Vue3 忽略 ts (TypeScript)的无故报错_忽略ts报错_小草莓蹦蹦跳的博客-CSDN博客

19、封装axios

Vue3 封装axios_vue3封装axios_小草莓蹦蹦跳的博客-CSDN博客

20、Vue3 和 Vue2 在编写代码中的区别

Vue3 和 Vue2 在编写代码中的区别_小草莓蹦蹦跳的博客-CSDN博客

21、报错

Recommendation: math.div(1, 5)

More info and automated migrator: https://sass-lang.com/d/slash-div

解决方法:将 "sass": "^1.26.5",    替换为  "sass": "~1.26.5",

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值