## 運行效果：  ## 第一步：新增路由，在`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`