element ui路由配置文件_element-ui一些注意点：

最新推荐文章于 2025-09-24 11:15:09 发布

原创最新推荐文章于 2025-09-24 11:15:09 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element ui路由配置文件

本文总结了Vue开发中的一些常见问题，包括组件导入、Dialog的懒渲染、表单验证、菜单路由匹配、Webpack配置、Vue响应式延迟及兼容性问题。强调了解决方案，如使用resolve缩写路径，关注Element-UI组件属性，正确使用Promise.all进行表单验证，以及处理Vue中this的使用。同时也提醒注意Webpack与Vue文件类型兼容性问题。

4.组件内引入文件，eg:

import tools from '@/common/tools/index.js'

为什么就可以找到src目录下的文件？因为在build/webpack.base.conf.js里面定义了简写形式

alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),

}

所以@ == src ，也造成了@后面要加/ ，等价于 src/ 。

5.clearValidate()要用在before-close函数和取消按钮函数里，其他地方不好使；Dom模板里不能用this，eg:$refs[‘form’].clearValidate();

解：Element-UI中的Dialog的内容是懒渲染的，即在第一次被打开之前，传入的默认slot不会被渲染到DOM上，如果要操作DOM，需要在open事件回调中开发代码。总结：直接阅读组件底部的Attributes、Slot、Events相关说明。可以通过node_modules读一下element-ui中Dialog组件的源码，使用BEMCSS规范，props用法，各个Vue用法的规范使用。

6.Dom里面的form-item循环里validator校验不能用this.xxx，用了会报错；不是循环的validator校验就可以用this.xxx，不会报错；自定义校验函数的回调函数callback(new Error('文案))；和callback('文案'); 第二种回调用法在for循环方式中不生效。

7.菜单路由路径和Vue-router里面的配置是全匹配，有空格都不行。

8.Form的每个item中的validator自定义校验逻辑只能有一个，如果是2个，就会promise的状态一直未padding，排查问题可用代码的删除排查法，删到最简单来排查。

9.多个表单校验，可用Promise.all[].then();很好用。

9.针对Vue响应不及时问题，setTimeOut是个很好的解决问题的办法。Event loop概念，但是有没有其他更好的办法呢？Object.assign(); Vue.$set(); 除此之外还有一个watch的巧用，数据变化就重新复制(解决jiaoshi工作台切换单元综合演练数据不更新问题)

10.webpack兼容问题，在Vue项目中，Vue文件的style中的type='text/css';script中的type='text/javascript'，与webpack4版本不兼容，需要删除掉这样的写法。