如何无需前端构建工具，直接在浏览器环境中使用Vuelidate 2？

你之前执行的全局npm安装命令对当前需求没有帮助，你无需使用Browserify、Babel、Webpack等任何构建工具，即可直接在普通HTML页面中使用Vuelidate 2，使用官方预编译的UMD格式包即可。

操作步骤 #

• 准备依赖文件：你可以选择两种方式获取可用的JS文件
  • 方式一：搜索获取公开的Vue 3、@vuelidate/core、@vuelidate/validators的UMD格式CDN资源
  • 方式二：从你已经全局安装的npm包目录中，提取@vuelidate/core/dist/index.umd.js、@vuelidate/validators/dist/index.umd.js两个文件，同时准备Vue 3的预编译浏览器用JS文件
• 在你的HTML文件中，通过script标签按顺序引入Vue 3、Vuelidate核心包、校验规则包的JS文件
• 直接在页面的script标签中编写业务代码即可，Vuelidate的所有API会挂载在window全局对象上，无需使用ES6 import语法

完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vuelidate 2 浏览器试用示例</title>
  <!-- 按顺序引入Vue 3、Vuelidate核心包、校验规则包的JS文件 -->
  <script src="你的Vue 3 JS文件路径"></script>
  <script src="你的@vuelidate/core umd文件路径"></script>
  <script src="你的@vuelidate/validators umd文件路径"></script>
</head>
<body>
  <div id="app">
    <input v-model="form.email" placeholder="输入邮箱">
    <p v-if="v$.email.$error">请输入有效的邮箱地址</p>
    <button @click="submit">提交</button>
  </div>

  <script>
    const { useVuelidate } = window.Vuelidate
    const { email, required } = window.VuelidateValidators

    Vue.createApp({
      setup() {
        const form = Vue.reactive({
          email: ''
        })
        const rules = {
          email: { required, email }
        }
        const v$ = useVuelidate(rules, form)

        const submit = () => {
          v$.$validate().then(isValid => {
            if (isValid) {
              alert('校验通过')
            }
          })
        }

        return {
          form,
          v$,
          submit
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

补充说明 #

• 上述UMD格式的文件已经做了兼容性处理，不需要额外转译即可在绝大多数主流浏览器中运行
• 目前绝大多数前端库都会打包UMD格式的预编译文件提供给非构建场景使用，文档通常默认优先展示面向SPA开发的npm安装方式，并不是没有浏览器可用的版本

内容的提问来源于stack exchange，提问作者xr280xr