Vue3报错‘defineProps‘ is not defined的解决方法
前言
2021年结束了，Vite 的版本也升级了，现在试试新版 Vite 搭建 Vue 项目。
按照 vue3一步一步的详细讲解配置ESLint 中 vue 官方推荐安装 ESLint 的方式安装 Eslint，结果发现 'defineProps' is not defined 报错，现在来解决这个问题。
环境
vite 2.7.2vue 3.2.25
配置
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
安装 ESlint 后
// package.json
{
"name": "my-vue-app1",
"version": "0.0.0",
"scripts": {
"build": "vite build",
"lint": "vue-cli-service lint",
"dev": "vite",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"vite": "^2.7.2"
}
}
定位问题
defineProps 属于 Vue3 的规则校验，需要在 eslint-plugin-vue官方指南中寻找对应配置。
添加对应配置即可
修改配置
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
'vue/setup-compiler-macros': true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
结果新出现了一个报错 Environment key "vue/setup-compiler-macros" is unknown
根据提示可知，是当前依赖包 eslint-plugin-vue 中没有 vue/setup-compiler-macros 规则，故需升级 eslint-plugin-vue，当前最新版本是 8.4.0
yarn upgrade eslint-plugin-vue@8.4.0 -D # OR npm update --save-dev eslint-plugin-vue@8.4.0
出现报错，安装最新版本 node 即可解决。
eslint-plugin-vue@8.4.0: The engine “node” is incompatible with this module. Expected version “^12.22.0 || ^14.17.0 || >=16.0.0”. Got “14.15.0”
当安装成功后，Environment key "vue/setup-compiler-macros" is unknown 报错问题解决。
最后项目整体就没报错了。
总结
解决一个问题，可能出现新的待解决问题，都解决后，问题就迎刃而解。
到此这篇关于Vue3报错‘defineProps‘ is not defined的解决方法的文章就介绍到这了,更多相关Vue3 ‘defineProps‘ is not defined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。下面小编给大家分享使用命令行工具npm新创建一个vue项目的方法，需要的朋友参考下吧2017-12-12
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，我们该如何解决这个问题呢，下面小编给大家带来了Vue中this.$set的正确使用，感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了关于单文件组件.vue的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue中图片上传组件封装-antd的a-upload二次封装的实例
这篇文章主要介绍了Vue中图片上传组件封装-antd的a-upload二次封装的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue页面跳转传递参数及接收方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
随着vue3 的发布和越来越多项目的使用,之前使用 vue2 的项目也不能拉下,vue2 升级 vue3 迫在眉睫,下面这篇文章主要给大家介绍了关于vue3升级常见问题的相关资料,需要的朋友可以参考下2023-03-03
vue element-ui el-tooltip组件失效问题及解决
这篇文章主要介绍了vue element-ui el-tooltip组件失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
Vue + Element UI 实现权限管理系统之菜单功能实现代码
菜单管理是一个对菜单树结构的增删改查操作，这篇文章主要介绍了Vue + Element UI 实现权限管理系统之菜单功能实现代码,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了vue + electron应用文件读写操作,如果要制作的应用并不复杂，完全可以将数据存储在本地文件当中，然后应用就可以通过这些文件进行数据的读写，需要的朋友参考下吧2022-06-06
最新评论