在呈现过程中访问了VUE属性&Quot；$v&Quot；中的vuelify，但未在实例上定义
我正在构建一个VUE组件，其中包含html文件中的表单。 需要使用vuelizer库验证表单。
显示以下警告，验证不起作用。
[Vue warn]：属性&qot；$v"；在呈现期间被访问，但未访问 在实例上定义。在
const { required, minValue, minLength, email } = window.validators;
const {Vuelidate} = window.vuelidate;
const vue = {
template:
/*html*/
`<div>
<form >
<p>
<input name="email" type="text" placeholder="Email" v-model="email" />
<span>{{$v}}</span>
</p>
<p>
<input name="password" v-model="password.password" type="password" placeholder="Password"/>
<span></span>
</p>
<p>
<input name="confirmPassword" v-model="password.confirm" type="password" placeholder="Confirm Password" />
<span></span>
</p>
<button @click="submitForm">Submit</button>
</form>
</div>
`,
data() {
return {
email: '',
password: {
password: '',
confirm: '',
},
};
},
validations: {
email: { required },
password: {
password: { required },
confirm: { required },
}
},
mounted: function() {
},
methods: {
submitForm() {
console.log(this.$v)
alert("Form successfully submitted");
},
},
};
const app = Vue.createApp(vue);
app.mount('#app');
app.use(window.vuelidate.default);input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.dirty {
border-color: #5A5;
background: #EFE;
}
.dirty:focus {
outline-color: #8E8;
}
.error {
border-color: red;
background: #FDD;
}
.error:focus {
outline-color: #F99;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<div class="row">
<div id = "app">
</div>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/dist/vuelidate.min.js" integrity="sha256-La6WkedSRP9RsZaBVOO1mwpob2EhzoiYSCxmAizHsYM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/dist/validators.min.js" integrity="sha256-0IEcyUDILTKDOFvs84hM79AdpmIDFw1d99udusXv2vQ=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>解决方案
Vuelide似乎没有iife导出。这意味着(AFAICT)它在浏览器中不可用，从CDN链接。它必须由节点应用程序编译，节点应用程序必须解析其依赖项。
下面介绍如何使用ROLLUP重新导出为立即调用的函数表达式(iife)：
- 创建临时文件夹，切换到该文件夹，启动节点项目：
mkdir test && cd test && npm init --yes
注意：如果在Windows命令提示符或Powershell中运行此命令，请将 &&替换为;(或仅单独运行每个命令)。
- 创建
index.js：
import { useVuelidate } from '@vuelidate/core';
window.useVuelidate = useVuelidate;
- 添加导出所需的包：
npm i rollup @rollup/plugin-node-resolve @vuelidate/core vue-demi
rollup捆绑您的文件- 节点解析汇总插件解析依赖项并将其包含在捆绑包中
vue-demi是@vuelidate/core依赖项。
反过来，vue-demi具有vue作为依赖项，但是我们将通过config让ROLLUP知道vue已经在全局作用域中可用，因此它不应该包含在包中。
- 创建
rollup.config.js：
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: './index.js',
output: {
format: 'iife',
file: 'vuelidate.iife.js',
globals: { vue: 'window.Vue' }
},
plugins: [nodeResolve()]
}
- 捆绑您的文件：
./node_modules/.bin/rollup --config rollup.config.js
- 如果一切正常，您现在应该在同一文件夹中有一个
vuelidate.iife.js文件。 - 在Vue之后将文件加载到您的浏览器中(期望
Vue在globalThis-akk.a：window中定义)。
查看其工作情况：https://codesandbox.io/s/modest-mirzakhani-tq46j?file=/index.html