app.vue
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style lang="less"> </style>index.vue
<template> <div class="login-container"> <!--必须用el-form进行包裹--> <div class="login-head"></div> <el-form class="login-form" ref="form" :model="user"> <el-form-item> <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input> </el-form-item> <el-form-item> <el-input v-model="user.code" placeholder="请输入验证码"></el-input> </el-form-item> <el-form-item> <el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox> </el-form-item> <el-form-item> <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { name: 'LoginIndex', components: { }, props: {}, data () { return { user: { mobile: '', // 手机号 code: ''// 验证码 }, checked: false// 是否同意协议 } }, methods: { onSubmit () { console.log('submit!') } } } </script> <style scoped lang="less"> .login-container{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: url("./login_bg.jpg") no-repeat; background-size: cover; .login-head{ width: 300px; height: 57px; background:url("./logo_index.png") no-repeat; margin-bottom: 30px; } .login-form{ background-color: #fff; padding: 50px; min-width: 300px; .login-btn{ width: 100%; } } } </style>main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import './styles/index.less' // 加载组件库 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')index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Login from '@/views/login/index' Vue.use(VueRouter) // 路由配置表 const routes = [{ path: '/login', name: 'login', component: Login }] const router = new VueRouter({ routes }) export default router运行结果
