Vue学习（三）开始编写登陆页面

Vue学习（三）开始编写登陆页面

解决Vue学习（二）熟悉项目结构时遇到的问题

Vue学习（二）熟悉项目结构
当时点击可视化面板中的serve无法运行，cmd中npm install然后npm run serve也无法运行。
仔细阅读窗口中的报错信息，发现基本都是一些格式问题，百度之后发现都是Eslint的原因，可以查看Eslint的常见错误。也可以直接关闭Eslint插件vue cli3关闭烦人的eslint 亲测有效

编写登陆组件布局

1. 首先设置背景色。进入login组件中在template话入style中添加样式

<template>    
<div class="login_container">        
<h1>登陆组件</h1>    
</div>
</template>
<script>export default {    }</script>
<style lang="less" scoped>
.login_container{
    background-color: aquamarine;
    }
</style>

进入可视化面板进行运行查看效果。
编译失败，点击输出查看原因

发现我们没有安装依赖项less-loader，这个在我们编写的login组件中的样式里用到了<style lang="less" scoped>，所以我们需要去安装这个依赖项，注意是安装到开发依赖中。又因为less-loader内部依赖于less,所以还需要在开发依赖中安装less。
再次运行时又遇到了Eslint的问题，烦死个人。

问题出现在第9行第一列，修改后运行成功

2. 编写页面，首先编写全局样式表，在src下的assets中建立css文件夹，再创建样式表global.css

/* 全局样式表 */
html,body,#app 
{  height: 100%;  margin: 0;  padding: 0;}

然后需要在入口文件main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
Vue.config.productionTip = false
new Vue({  router,  render: h => h(App)}).$mount('#app')

然后在login.vue中修改页面。left: 50%; top: 50%; transform: translate(-50%,-50%);，先向右向下移动50%，再向左向上移动自身的50%，再向即可把框移动到屏幕中央

<template>
    <div class="login_container">
        <div class="login_box">
        </div>
   </div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.login_container{
    background-color: aquamarine;
    height: 100%;}
.login_box{
    width: 450px;    
    height: 300px;    
    background-color: blue;   
    border-radius: 3px;    
    position: absolute;    
    left: 50%;    
    top: 50%;    
    transform: translate(-50%,-50%);
    }
</style>

刷新运行界面，界面更新成功

开始完善登陆页面

登陆头像，在login_box中新加入头像区域

<div class="login_box">            
<!-- 头像区域 -->
   <div class="avatar_box">            
      <img src="../assets/logo.png" alt="">            
   </div>        
</div>

然后添加相应样式表border-radius: 50%;代表改为圆角，边框线加阴影box-shadow: 0 0 10px #ddd;

.login_box {
  width: 450px;
  height: 300px; 
  background-color: #fff;  
  border-radius: 3px;  
  position: absolute;  
  left: 50%;  
  top: 50%;  
  transform: translate(-50%, -50%);
  .avatar_box {    
  	height: 130px;    
  	width: 130px;    
  	border: 1px solid #eee;    
  	border-radius: 50%;    
  	padding: 10px;    
  	box-shadow: 0 0 10px #ddd;    
  	position: absolute;    
  	left: 50%;    
  	transform: translate(-50%, -50%);    
  	background-color: #fff;    
  	img {
  	      width: 100%;      
  	      height: 100%;      
  	      border-radius: 50%;      
  	      background-color: #eee;
  	    }  
  	    }
 }

运行效果