vue脚手架中使用elementUI组件

1、安装依赖
npm i element-ui -S

2、全局引入
在 main.js 中写入以下内容：

import Vue from 'vue'; 
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue'; 

Vue.use(ElementUI); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
});

vue+element注册页demo

<template>
  <div class="register-form">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="75px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" plain @click="goLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    name:'RegisterView',
    data() {
        var checkName = (rule, value, callback) => {
        if (!value) {
            callback(new Error("用户名不能为空"));
        } else if (!/^\w{5,12}$/.test(value)) {
            callback(new Error("用户名应是5-12位的大小写字母、数字或_下划线"));
        } else {
            callback();
        }
        };
        var checkEmail = (rule, value, callback) => {
        if (!value) {
            callback(new Error("邮箱不能为空"));
        } else if (!/^\w*@[a-z0-9A-Z]*\./.test(value)) {
            callback(new Error("邮箱应包含'@'和'.'字符"));
        } else {
            callback();
        }
        };
        var validatePass = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请输入密码"));
        } else if (!/^[A-Za-z0-9]{6,16}$/.test(value)) {
            callback(new Error("密码应是6-16位的大小写字母或数字"));
        } else {
            if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
            }
            callback();
        }
        };
        var validatePass2 = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
            callback(new Error("两次输入密码不一致!"));
        } else {
            callback();
        }
        };
        return {
        ruleForm: {
            name: "",
            email: "",
            pass: "",
            checkPass: "",
        },
        rules: {
            name: [{ validator: checkName, trigger: "blur" }],
            email: [{ validator: checkEmail, trigger: "blur" }],
            pass: [{ validator: validatePass, trigger: "blur" }],
            checkPass: [{ validator: validatePass2, trigger: "blur" }],
        },
        };
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
            alert("register!");
            } else {
            console.log("error register!!");
            return false;
            }
        });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        },
        goLogin(){
        this.$router.replace('/')
        }
    },
};
</script>

<style lang="scss" scoped>
.register-form{
    width: 320px;
    margin: 150px auto;
    background: linear-gradient(to bottom,skyblue,pink);
    padding: 60px 40px 30px 20px;
    border-radius: 20px;
}
.el-form-item__label::before{
    content: '*';
    color: red;
    display: inline;
}
</style>