VUE用Element组件完成表单验证

Element官网：https://element.eleme.cn/#/zh-CN/component/form

操作步骤：

第一步：

命令窗口中在项目地址下：

输入npm i element-ui -S 安装elementui 依赖

第二步：

第三步：

复制上面代码到Home.vue中

下面进行我们的表单验证：

router下index.js文件配置路由：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'regis',

    component:()=>import('@/views/RegisView.vue')

  },

]

const router = new VueRouter({

  routes

})

export default router

App.vue引用：

在views文件下编写RegisView.vue文件：

★☆千万别忘记使用Element一定要全局main.js里面写入

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

效果图：