day01-项目介绍及初始化-登录页

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

day01-项目介绍及初始化-登录页

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、人力资源项目介绍

1.1项目架构和解决方案

主要模块

解决的问题

二、拉取项目基础代码

1.引入库

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  heimahr

2.升级core-js版本到3.25.5

$ npm i core-js@3.25.5
$ yarn add core-js@3.25.5

按照完整依赖

$ npm i

//启动
npm run dev

3.项目目录和入口文件介绍

3.1 入口文件

4.App.vue根组件解析

4.1App.vue组件

4.2layout布局

5.基础设置settings.js和导航守卫 permission.js

settings.js导出网站基础配置，包括：网站标题、固定header、显示logo
permission.js(权限)，主要负责路由导航守卫

6.Vuex的结构

模板中的结构

注意：人资资源项目主要针对用户模块user 进行改造和重写

Vuex的设计思想

1.页面交互状态(折叠侧边栏-固定头部)

2.使用全局状态Vuex根据功能拆分成不同的模块(modules)

const store = new Vuex.Store({
  modules:{
    app,
    settings,
    user
  },
  getters
})

3.进行状态管理通过getters建立对于模块中属性的快捷访问

const getters = {
  sidebar:state => state.app.sidebar,
  device:state => state.app.device,
  token:state => state.user.token,
}

7.使用模板中的Icon图标

7.1 src/icons/svg目录下的图标都可以使用

7.2 图标文件名直接设置为svg-icon组件的iconClass属性

8.扩展-解析Icon图标的实现思路

8.1引入目录所有的svg

const req = require.context('./svg',false,/\.svg$/);
const requireAll = requireContext =>requireContext.keys().map(requireContext);
requireAll(req);

8.2全局注册svg-icon组件

Vue.component('svg-icon',SvgIcon)

8.3 loader插件打包svg

// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('')

8.4svg-icon引用svg的链接

8.5扩展

8.5.1 了解：require.context(路径，是否扫描子目录， 正则匹配) 可以引入某个目录下的内容

8.5.2 了解：svg-sprite-loader打包了所有svg到一个svg标签上，将svg名称作为symbol标签的id属性

8.5.3 了解：svg-icon使用iconClass属性引用了symbol的id

9.导入样式资源并使用git管理

9.1删除原有的.git文件，初始化仓库

git init 

9.2添加到暂存区

git add .

9.3提交本地仓库

git commit -m '初始化项目'

9.4本地仓库配置远程仓库地址

git remote add origin 仓库地址

9.5推送到远程仓库

git push -u origin master

10.登录页的结构和表单

10.1 登录页的基本结构布局(src/views/login/index.vue)

<template>
  <div class="login-container">
     <div class="logo" />
    <div class="form">
      <h1>登录</h1>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <div class="form" >
  <h1>登录</h1>
  <el-card shadow="never" class="login-card">
    <!--登录表单-->
    <!-- el-form > el-form-item > el-input -->
    <el-form ref="form" :model="loginForm" :rules="loginRules">
      <el-form-item prop="mobile">
        <el-input placeholder="请输入手机号" v-model="loginForm.mobile" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="loginForm.password" show-password/>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="loginForm.isAgree">
          用户平台使用协议
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button style="width:350px" type="primary" @click="login">登录</el-button>
   </el-form-item>
</el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default{
    name:"Login"
   }
</script>
<style lang="scss">
  .login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
      no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 176px;
    .el-card {
      border: none;
      padding: 0;
    }
    h1 {
      padding-left: 20px;
      font-size: 24px;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #f4f5fb;
      }
    }
    .el-checkbox {
      color:#606266;
    }
  }
}
</style>

11.登录表单校验

11.1定义数据和校验规则

export default{
  name:'Login',
  data(){
    return{
      loginForm: {
        mobile: '',
        password: '',
        isAgree: false
      },
      loginRules: {
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'

        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 16,
          message: '密码长度应该为6-16位之间',
          trigger: 'blur'

        }],
        // required只能检查 null "" undefined
        isAgree: [{
          validator: (rule, value, callback) => {
            // rule规则
            // value检查的数据 true/false
            // callback 函数 执行这个函数
            // 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))
            value ? callback() : callback(new Error('没有勾选用户平台协议'))
          }
        }]
      }
     }
   },
   methods:{
    login(){
      this.$refs.form.validate((isok)=>{
        if(isok){
         alert('校验通过') 
        } 
      }) 
    } 
   }
}