首先，我們先安裝ElementUI。執行vue ui，搜尋依賴，安裝

　　在main.js新增使用兩個引用，一個載入。 

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

Vue.config.productionTip = false

Vue.use(ElementUI);

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

       我們先來調整一下App.vue中樣式

<style lang="scss">
    #app {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }
</style>
 

       然後是login.vue，目前我們沒有後臺，使用者名稱和密碼暫時寫死在前臺：admin/123456

 1 <template>
 2     <div class="login-page-container">
 3         <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
 4                  class
 
="demo-ruleForm login-container">
 5             <h3 class="title">系統登入</h3>
 6             <el-form-item prop="account">
 7                 <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="賬號"></el-input>
 8             </el-form-item>
 9             <el-form-item prop="password">
10                 <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密碼"></el-input>
11             </el-form-item>
12             <el-form-item style="width:100%;">
13                 <el-button type="primary" style="width:100%;" @click="submit" :loading="loading">登入</el-button>
14             </el-form-item>
15         </el-form>
16     </div>
17 </template>
18 <script>
19     export default {
20         props: {},
21         data() {
22             return {
23                 loading: false,
24                 loginForm: {
25                     account: '',
26                     password: ''
27                 },
28                 loginRules: {
29                     account: [{
30                         required: true,
31                         message: '請輸入賬號',
32                         trigger: 'blur'
33                     },
34                     ],
35                     password: [{
36                         required: true,
37                         message: '請輸入密碼',
38                         trigger: 'blur'
39                     },
40                     ]
41                 },
42                 checked: true
43             };
44         },
45         methods: {
46             submit() {
47                 var self = this;
48                 self.$refs.loginForm.validate((valid) => {
49                     if (valid) {
50                         self.loading = true;
51                         var userInfo = {
52                             username: this.loginForm.account,
53                             password: this.loginForm.password,
54                         };
55                         if (userInfo.username == "admin" && userInfo.password == "123456") {
56                             self.loading = false;
57                             self.$router.push({path: '/'});
58                         } else {
59                             self.loading = false;
60                             self.$alert('使用者名稱或密碼錯誤！', '提示資訊', {
61                                 confirmButtonText: '確定'
62                             });
63                         }
64                     } else {
65                         return false;
66                     }
67                 });
68             }
69         }
70     }
71 </script>
72 <style lang="scss">
73     .login-container {
74         -webkit-border-radius: 10px;
75         -moz-border-radius: 10px;
76         border-radius: 10px;
77         background-clip: padding-box;
78         margin: 200px auto;
79         width: 350px;
80         padding: 25px 35px 25px;
81         background: #fff;
82         border: 1px solid #eaeaea;
83         box-shadow: 0 0 25px #ccc;
84     }
85 
86     .title {
87         text-align: center;
88     }
89 </style>