2021新年 Vue3.0 + Element UI 尝鲜小记

2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术。

本文主要记录了使用 Vue CLI 来完成项目搭建的过程。

安装升级最新的 Vue CLI 4.x

npm install -g @vue/cli

输入vue -V (大写的V) 查看版本 @vue/cli 4.5.9,一定要安装新版,不然使用不了 Vue 3。

创建 Vue 3.0 版本的项目

如图,使用 vue create my-app 创建项目,会有如下提示,选择中间项可以直接创建3.0的项目,选择最后一项,可以手动选择创建2.0或者3.0版本和其他配置项。

项目引入 Element Plus

Element UI 也发布了对应 Vue 3.0 的升级版本 Element Plus https://github.com/element-plus/element-plus 使用 Vue CLI 可以一键引入进来

cd my-app
vue add 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0中,可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例: 1. 在Vue3.0项目中,首先需要先安装Element Plus组件库: ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中,引入Element Plus的表单组件和校验规则: ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中,我们使用了Element Plus的表单组件和校验规则来实现表单校验,其中: - `ElForm`:表单组件,用于包裹需要校验的表单项; - `ElFormItem`:表单项组件,用于包裹表单控件和校验规则; - `ElInput`:输入框组件,用于输入表单数据; - `ElButton`:按钮组件,用于提交表单数据; - `ref`:Vue3.0中用于获取组件实例的方法。 在`setup()`函数中,我们使用了`ref`来定义表单数据和校验规则,并且定义了一个`submitForm()`方法来提交表单数据,其中: - `validate()`:表单校验方法,用于校验表单数据是否满足校验规则; - `valid`:校验结果,如果校验通过则为`true`,否则为`false`。 总体来说,使用Element Plus的表单校验功能非常简单,只需要在需要校验的表单项中定义相应的校验规则,并在提交表单时调用`validate()`方法即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值