Vue2实战
文章平均质量分 58
Vue2开发中遇到的问题记录
扶苏1002
一个热衷于技术的前端博主
展开
-
Vue组件相互引用,组件不能正常注册,控制台报错
所以在B引用C的时候,我们采用异步组件,这样在B用到C组件的时候再去加载C组件就不会出现上面的问题了。Vue项目中在控制台遇见下面的这种报错,组件没有正常注册,排查代码发现组件也都正常导入、注册、使用了。A组件引用了B组件,B组件引用了C组件,C组件内部又引用了A组件,存在着相互引用。按照报错问题上面的文件引用关系,逐级排查发现存在着件组相互引用的问题,组件如下。原创 2024-11-24 12:02:13 · 148 阅读 · 0 评论 -
Vue开发和生产环境的代理配置
对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的,这里的代理是对请求路径的代理,也就是axios的请求路径(简单点理解就是对路径进行替换),例如以下代码,我们将/api这个路径代理到了target指向的真实的后端地址。其中VUE_APP_BASE_API是Vue的关键后端请求地址,我们可以在nodejs项目的任意js代码中获取环境变量,例如在创建axios请求实例对象时,通过process.env.“环境变量的KEY”原创 2024-11-16 11:46:10 · 367 阅读 · 0 评论 -
vue中两个v-for并列并且绑定的key都是index会报错
并列循环,渲染的dom结构是同级的,key都绑定index会有重复。原创 2024-09-14 13:38:36 · 299 阅读 · 0 评论 -
vue组件使用$listeners同时自己添加事件,重复执行
进行批量事件和属性透传,基于自己的实际业务可能需要新增或者修改一些属性和事件。事件参数只有当前选项的值,部分场景下需要获取到完整选项数据。此时就会只执行一次事件,实现预期效果。这类组件库进行二次封装时,通过使用。部分场景下,如自己封装的组件或对。解决方案:通过扩展运算符覆盖事件。实际执行会发现事件执行了两次。PS:$attrs同理。原创 2024-07-30 15:57:08 · 271 阅读 · 0 评论 -
vue项目无法热更新 问题解决
如果没有安装,可以使用以下命令进行安装。原创 2024-05-11 14:26:07 · 1537 阅读 · 0 评论 -
vue cli3.0 下解决修改css页面无法热更新
修改css页面无法热更新。原创 2024-05-10 20:50:51 · 211 阅读 · 0 评论 -
Vue项目中图片资源应该存放public还是assets文件夹下?
你是否有过这样的疑问?在vue项目中public和assets文件夹都可以存放图片,那么图片应该存放public还是assets文件夹下?public或assets文件夹下有什么区别呢?什么样的图片应该存放在public文件夹下?什么样的图片应该存放在assets文件夹下?原创 2024-05-10 20:28:15 · 1250 阅读 · 0 评论 -
npm run dev运行vue项目的时候卡在68%
检查你的.vue文件有没有误写两层template。原创 2024-05-10 20:08:36 · 583 阅读 · 1 评论 -
vue中style使用scoped后再使用@import仍为全局作用域
vue中style使用scoped后再使用@import仍为全局作用域。原创 2024-05-06 10:51:55 · 860 阅读 · 0 评论 -
vue2中template里使用可选链操作符( ?. )报错解决方案
版本,同时 node 版本升级到。不支持可选链操作符,升级。原创 2024-04-30 20:29:16 · 1804 阅读 · 2 评论 -
vue2中使用require.context批量注册组件
一个webpack的api,通过该函数可以获取一个上下文,从而实现工程自动化(遍历文件夹的文件,从中获取指定文件,自动导入模块)。在前端工程中,如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。原创 2024-04-27 16:57:59 · 1010 阅读 · 0 评论 -
vue中~@和@的区别
其后的任何内容都会作为一个模块请求被解析,即使是相对路径。的指向都是一样的,唯一的区别在于是否添加。可以在任意地方使用,甚至可以引用。,会作为一个模块请求被解析。原创 2024-04-25 09:40:04 · 933 阅读 · 1 评论 -
vue2.x配置@指向src三种方法
【代码】vue2.x配置@指向src三种方法。原创 2024-04-25 09:28:57 · 1089 阅读 · 0 评论 -
vue项目配置git提交规范husky、lint-staged、@commitlint/cli
项目中代码格式以及git message如果不加以约束,可能最终的格式会五花八门,这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。原创 2024-04-19 12:33:40 · 2682 阅读 · 0 评论 -
解决Vue项目中babel不支持JS新语法[链判断运算符?.空值赋值运算符??=空值合并操作符 ??]
和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。允许开发人员读取深度嵌套在对象链中的属性值,而不必验证每个引用。当引用为空时,表达式停止计算并返回。虽然浏览器能够认识这些新的运算符,但是项目中使用必须@babel/plugins转化才能使用。的时候,才会将右侧变量的值赋值给左侧变量,其他所有值都不会进行赋值。时,才会返回右侧的值。原创 2024-04-19 11:36:27 · 749 阅读 · 0 评论 -
Vue2老项目配置ESLint和Prettier
接手一个老项目Vue2,由VueCli构建,需要集成一下ESLint和Prettier,保证代码规范。原创 2024-04-18 15:11:44 · 3016 阅读 · 1 评论 -
总结8个常用的Vue自定义指令
Vue 2.X 与 Vue 3.X 相比,钩子函数是存在变化的自定义指令要分全局自定义指令和局部指令全局指令:通过应用实例身上的directive()注册一个全局自定义指令Vue.directive(指令名, { 自定义指令生命周期 })// Vue 2.Xel.focus()})// Vue 3.Xel.focus()})这是一个简单的小案例,通过注册一个v-focus指令,实现一个在页面加载完成后自动让输入框获取焦点的小功能。实现:根据正则表达式,设计自定义处理表单输入规则的指令。原创 2024-02-01 18:25:47 · 1425 阅读 · 0 评论
分享