使用vue2.0创建简单登录UI

建立登录页面
创建vue项目后安装npm i element-ui -S
一、路由配置

1.在 src\views 目录下新建 login 目录及此目录下新建文件 index.vue

说明：通过 import Login from ‘./views/login’ 导入组件，当前只指定了组件路径，默认导入的就是指定路径
下的 index.vue 组件

2.在 src\router.js 中配置路由（把原有的路由配置删除），如下：

import Vue from "vue";
import Router from "vue-router";
// import Login from './views/login/index.vue'
import Login from './views/login'

Vue.use(Router);

export default new Router({
routes:[
  {
    path:'/login',
    name:'login',//路由名称
    component: Login//组件对象
  }
]
});

3.路由渲染出口，在 App.vue 中, 注意样式保持一致

main.js

import Vue from "vue";
// 注意引入在 Vue的下面
//  ElementUI 组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from "./App.vue";
import router from "./router";

// 使用 ElementUI
Vue.use(ElementUI);

Vue.config.productionTip = process.env.NODE_ENV === 'production';
console.log(process.env.VUE_APP_SERVICE_URL) // 开发环境 development, 生产环境 production 

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

二、登录页面

Elemen UI文档：：https://element.eleme.cn/#/zh-CN/component/form#dian-xing-biao-dan

1.在 src\views 目录下的 index.vue 文件中添加登录表单模板
表单输入框，如果没有使用 v-model 绑定值，是不允许输入值的。

2.添加样式

注意：

将 login.jpg 图片拷贝到 src\assets 目录下

模板中添加类名 login-container 、login-form 、login-title 切记放图片

三、表单验证

校验输入的帐号和密码都不允许为空。
通过 rules 属性传入约定的验证规则。并将 el-form-item 的 prop 属性设置为需校验的字段名即可。

1.在 el-form 上添加绑定属性 :rules=“rules” ，帐号和密码的 el-form-item 上使用 prop 指定校验字段名

2.在组件实例的 data 选项中添加 rules 属性，添加后对应 label 左边会有红色

form: {
            username:'',
            password:''
        },
        rules:{
           username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
           password:[{ required: true, message: '密码不能为空', trigger: 'blur' }],
        }

3.添加提交表单处理函数， 注意换了函数名是 submitForm

          登录
        

    methods: {
       submitForm(formName) {
        this.$refs[formName].validate(valid => {
            // console.log(valid)
            if(valid) {
                return false;
            }
        })
    }