2021-07-02 山东大学软件学院暑期项目实训-day4&day5

学习目标：

根据视频学习如何创建项目以及实现简单的登录页面

---

学习内容：

1. git的使用，登录注册gitte生成公钥并建立仓库，生成公钥的步骤添加链接描述
   码云的使用方法：添加链接描述

2. 创建项目并添加插件
   （1）利用控制台输入 vue ui，打开可视化界面，创建项目时可以根据预设选择也可以自行配置，自行配置时需要添加插件和router选项。
   
   （2）添加element，axios插件
   
   后面需要用的less和less-loader也需要下载:注意是在开发依赖中下载
   
   （后面下完less和lessloader后报错编译无法通过，可以通过命令台下载后重启
   运行 npm install less-loader --save）
   （3）运行程序和打开界面
   

3. 项目分析
   （1）新建分支
   （2）需要修改的文件：其中Login是新建的登录界面，index.js负责处理路由问题，App.vue负责项目的整体
   
   其中index.js的编写如下，redirect是重定向，在输入/后重定向到/login界面。
   

4. 登录注册页面设计
   （1）添加全局样式表global.css，先在assets文件夹下创建global.css然后需要在main.js文件中引入才能使用。
   （2）使用element之前需要在element.js中引入需要用到的组件。
   
   （3）login.vue的设计情况：
   从element中获取组件代码
   根据vue如何使用阿里矢量库使用阿里组件

<template>
  <div class="login_container">
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!--表单区域-->
      <el-form label-width="0px" class="login_form">
        <!--用户名-->
        <el-form-item>
          <el-input prefix-icon="iconfont icon-user" ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item>
          <el-input prefix-icon="iconfont icon-password"></el-input>
        </el-form-item>
        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: ''
}
</script>

<style lang="less" scoped>
.login_container{
  background-color: #2b4b6b;
  height:100%
}
.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;
  }
}
.btns{
  display: flex;
  justify-content: flex-end;
}
.login_form{
  position: absolute;
  bottom: 0;
  width:100%;
  padding:0 20px;
  box-sizing: border-box;
}
</style>

页面展示：

5. 遇到的问题及解决方法
   
   
   
   
   
   

---

学习产出：

博客一篇，能进行简单的登录注册页面设计