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 "" undefinedisAgree: [{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('校验通过') } }) } }
}