登陆页面搭建第一天

搭建自己的系统（前端）

1、第一个vue组件
2、webstorm基础使用
3、安装依赖，开发环境运行和访问
4、创建页面，分配路由
5、vue基础操作

---

基础环境准备

1、安装node.JS

2、安装vue
使用管理员cmd安装
npm install -g vue-cli
查看vue版本
vue --version

3、初始化项目
vue init webpack webapp

4、使用webstorm打开webapp项目

登录视图页面

1、安装element-ui
npm i element-ui -S
2、查看项目是否安装element
打开package.json，可以看到elment-ui版本

3、引入element
打开main.js根据官网提示复制一下内容，引入加正式安装三行

4、开始app项目制作登录页面
保留router-view进行渲染

5、views目录创建login.vue
内容为login

6、修改路由文件,index.js

7、查看项目页面
执行 npm run dev
查看页面

项目表单创建

1、页面设计

<template>
    <div>
        <el-form ref="form" :model="loginForm">
          <h3>系统登陆</h3>
          <el-form-item>
            <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码">

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码">
            </el-input>
              <img src="">
              <el-checkbox v-model="checked">记住我</el-checkbox>
              <el-button type="primary">登陆</el-button>


          </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  name: "login",
  data(){
    return{
      loginForm:{
        username:'admin',
        password:'123',
        code:''
      }
    }
  }
}
</script>

<style scoped>

</style>

2、页面调整样式

<template>
    <div>
        <el-form ref="form" :model="loginForm" class="loginContainer">
          <h3 class="loginTitle">系统登陆</h3>
          <el-form-item>
            <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码">

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" class="loginCode">
            </el-input>
              <img :src=captchaUrl>
              <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
              <el-button type="primary" style="width: 100%">登陆</el-button>


          </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  name: "login",
  data(){
    return{
      captchaUrl:'',
      loginForm:{
        username:'admin',
        password:'123',
        code:''
      },
      checked:true
    }
  }
}
</script>

<style>
  .loginContainer{
    border-radius: 15px;
    backgroud-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaaaaa;
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle{
    margin: 0px auto 40px auto;
    text-align:center;
  }
  .loginCode{
    width: 250px;
    margin-right: 80px;
  }
  .loginRemember{
    text-align: left;
    margin: 0px 0px 15px 0px;
  }

</style>