前端学习（2393）：使用form表单组件进行布局

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进行包裹--> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="手机号"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-form-item label="验证码"> <el-input v-model="form.code"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { name: 'LoginIndex', components: { }, props: {}, data () { return { form: { mobile: '', code: '' } } }, methods: { onSubmit () { console.log('submit!') } } } </script> <style scoped lang="less"> </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

运行结果