为何编译成功，卡在debugger上

出现warning如下

然后浏览器一致不能正确显示

main.js的内容应该是和教程一样的

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate)

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

谢谢！

幕布斯3322991 2021-07-03

源自：全栈开发初体验 4-7 VeeValidate的安装及使用（表单验证进阶）

收起

1回答

Brian 2021-07-03 17:18:53

小伙伴，你要知道Vue的插件都需要一个install属性：

https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

可能是你的Veevalidate的版本的问题，不同的版本的使用不一样。

你把你的package.json发出来，我看看你的veevalidate的版本

收起回答

提问者幕布斯3322991 #1

{
"name": "front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"svg-captcha": "^1.4.0",
"vee-validate": "^3.4.10",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"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": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}

确实和老师课件中的版本不太一样

2021-07-03 21:12:12

提问者幕布斯3322991 #2

按照老师提示，版本降到
"vee-validate": "^2.2.13",
就可以正常工作了。
不过还是不太理解老师说的“Vue的插件都需要一个install属性”是什么意思？是3.4.10版本的vee-validate存在缺陷没有install的属性么？

2021-07-03 21:28:15
Brian 回复提问者幕布斯3322991 #3

因为Veevalidate 3.x的使用方式发生了变化：

https://vee-validate.logaretm.com/v3/overview.html#usage

2021-07-07 11:54:53