## 运行效果：  ## 第一步：新增路由，在`router/index.js` 1. 在`const routes`变量中，新增路由 `{ path: '/login', name: 'Login', component: Login },` 2. 导入`Login`组件文件 `import Login from '../views/Login.vue'` ## 第二步：创建登录文件，命名为Login.vue ``` <template><div>登录页</div></template> ``` ## 第三步：复制代码，到Login.vue文件中 代码如下： ``` <style scoped> .card-box {padding: 20px;border-radius: 5px;background-clip: padding-box;background-color: #f9fafc;margin: 120px auto;width: 400px;border: 2px solid #8492a6;} .title {margin: 0 auto 40px;text-align: center;color: #505458;} .loginform {width: 350px !important;padding: 35px 35px 15px !important;} </style> <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="card-box loginform"> <h3 class="title">通用后台登录</h3> <el-form-item label="" prop="name"> <el-input v-model="ruleForm.name" placeholder="账号"></el-input> </el-form-item> <el-form-item label="" prop="name"> <el-input v-model="ruleForm.name" placeholder="密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit" style="width: 100%;">登录</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { name: '' }, rules: { } }; }, methods: { } } </script> ``` ## 第四步：编辑App.vue全局样式 ``` <style> body { background: #1f2d3d; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } </style> ``` ## 第五步：运行浏览器看效果 浏览器访问：`localhost:8081/login`