npm i element-ui -S
快速上手引入main.jsp
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); //
Login.vue
<template>
<div style="display: flex;justify-content: center">
<el-card class="box-card" style="width:400px;margin-top: 100px">
<div slot="header" class="clearfix">
<span>登陸</span>
</div>
<div>
<table>
<tr>
<td>用戶名</td>
<td>
<el-input v-model="user.username" placeholder="請輸入內容"></el-input>
</td>
</tr>
<tr>
<td>密碼</td>
<td><el-input placeholder="請輸入密碼" v-model="user.password" show-password
@keydown.enter.native=" doLogin"></el-input>
</td>
</tr>
<tr>
<td colspan="2">
<el-button type="primary" round style="width: 280px;" @click="doLogin" >登陸</el-button>
</td>
</tr>
</table>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "Login ",
data(){
return{
user:{
username:``,
password:``
}
}
},
methods:{
doLogin(){
console.log(this.user);
}
}
}
</script>
<style scoped>
</style>
index.js路由表註冊組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'login',
component: Login,
}
]
const router = new VueRouter({
routes
})
export default router
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>