element-ui的基本使用方法

在vue项目中使用element-ui做一个登陆页面

1.安装

    npm install element-ui --save

2..main.js文件中添加代码

     import Vue from 'vue';

     import Element from 'element-ui';

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

     import App from './App.vue';

    // size：组建默认尺寸，z-index：弹框初始z-index

     Vue.use(Element, { size: 'small', zIndex: 3000 });

     new Vue({

          el: '#app',

          render: h => h(App)

     });

4.components文件夹中新建文件Login.vue

    （1）结构样式

           <div class="login-container">

                 <el-form class="loginForm" ref="loginForm"  rules="rules" :model="loginForm">

                       <div class="title-container"> 

                              <h3 class="title">用户登陆</h3>

                       </div>

                       <el-form-item prop="username">

                              <el-input v-model="loginForm.username" type="text" :placeholder="用户名"></el-input>

                       </el-form-item>

                 </el-form>

          </div>