VUE2实现iHRM人力资源后台管理

一小池勺

“音乐会治愈我，运动会治愈我，风景会治愈我，阅读会治愈我，做饭也会治愈我，还有阴雨天的被窝，周末可以肆无忌惮的赖床，我的意思是，我们应该热爱生活。”

---

WeChat

---

引子

《 黑马程序员》出了一套比较基础的后台管理的项目，使用的是 vue2 对一个后台管理模板进行的二次开发。他们给了很详细的接口文档，我决定从 0 - 1，从样式到逻辑，一起给写一写，之后再使用 vue3 对其进行重构。当然这套接口也将用于我 React 的练习接口资料。

第一天

1. 项目架构和解决方案

2. 拉取项目基础代码

• 拉取命令

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

• 升级core-js版本到3.25.5

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

• 安装完整依赖

$ npm i # npm
$ yarn  # yarn

• 启动命令在package.json中查看

$ yarn dev

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

• 项目目录

├── src                        # 源代码目录
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

• 入口文件
  

4.App.vue根组件解析

• App.vue组件

• layout布局

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

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

6.Vuex的结构

• 模板中的结构

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

• Vuex的设计思想

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

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

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

7.使用模板中的Icon图标

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

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

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

• 引入目录所有的svg

• 全局注册svg-icon组件

• loader插件打包svg

• svg-icon引用svg的链接

• 知识扩展

1.了解：require.context(路径，是否扫描子目录， 正则匹配) 可以引入某个目录下的内容
2.了解：svg-sprite-loader打包了所有svg到一个svg标签上，将svg名称作为symbol标签的id属性
3.了解：svg-icon使用iconClass属性引用了symbol的id

9. 登录页的表单样式及表单校验

Login 页面使用到的UI控件有 el-card el-form el-form-item el-input el-button el-checkbox

使用参考：

• Ele-Others-Card 卡片
• Ele-Form-Form 表单

<template>
  <div class="login-container">
    <div class="login-container_left" />
    <div class="login-container_right">
      <h1>登录</h1>
      <el-card shadow="never">
        <el-form ref="form" :rules="rules" :model="form">
          <el-form-item prop="mobile" placeholder="请输入手机号">
            <el-input v-model="form.mobile" />
          </el-form-item>
          <el-form-item prop="password" placeholder="请输入密码">
            <el-input v-model="form.password" />
          </el-form-item>
          <el-form-item prop="agreement">
            <el-checkbox v-model="form.agreement">用户平台使用协议