做网站前的准备什么软件万网企业邮箱登陆界面如何嵌入到自己的网站

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

---

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('校验通过') } }) } }
}