我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
人力资源的环境搭建
问题: 这类的系统太常见了! 一切从零开始, 效率太低! 会参考已经集成的模板
vue-element-admin 的了解和介绍
目标: 学习和了解通用的 vue后台 集成方案**vue-element-admin** vant (移动端) element-ui(PC端)
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。
它使用了最新的前端技术栈，内置国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，
它可以帮助你快速搭建企业级中后台产品原型。
vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 我们可以从中获得很多成熟的解决方案.
vue-element-admin有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发,但是可以通过该项目中的一个案例来进行学习和使用
这里是官网地址
集成方案并不适合我们直接拿来进行二次开发，基础模板则是一个更好的选择
基础模板, 包含了基本的 登录 / 权限架子 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发
基础模板地址: gitee.com/panjiachen/…
小结： 浏览vue-element-admin，了解这个集成方案
搭建项目前的一些基本准备
目标: 介绍搭建一个vue中台项目,需要环境和工具
接下来要做的是一个大型的项目，我们需要更好的环境准备和资源前置，所以提前检查我们的环境和资源
nodejs环境
nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的**
npm**功能来管理依赖包
查看node 和 npm的版本
$ node -v #查看node版本
$ npm -v #查看npm版本
git版本控制
查看git安装版本
$ git --version #查看git安装版本
npm淘宝镜像
如果用 npm, 不用 yarn, 一定要配置淘宝镜像
$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址
$ npm config get registry #查看镜像地址
vscode编辑器
vscode编辑器是目前前端开发的编码利器， 以及丰富的插件系统，非常适合开发前端项目
vscode编辑器插件 + vetur + eslint
vetur是基于 单文件组件开发的支持插件, eslint是 基于代码校验的插件工具
除此之外, eslint需要在vscode中进行一些参数的配置
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
...
}
本项目的技术栈 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui
本节任务： 大家检查各自的开发环境和资源，尤其是npm的淘宝镜像额外需要注意
项目模板启动 和 目录介绍
目标: 拉取基础模板的内容, 运行起来, 并对目录进行介绍
git拉取基础项目模板
$ git clone git@gitee.com:panjiachen/vue-admin-template.git hrsaas # 拉取基础模板的代码
git 下载完毕后, 可以将 .git 文件夹删除, 我们后面自己初始化
安装项目依赖（定位到项目目录下）
$ npm i #安装依赖 yarn
启动项目
$ npm run dev #启动开发模式的服务 yarn dev
项目运行完毕，浏览器会自动打开基础模板的登录页，如上图
目录结构
本项目已经为你生成了一个基本的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。
├── build # 构建打包相关
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件 我们在做项目时 其中最关注的就是**src**目录, 里面是所有的源代码和资源, 至于其他目录, 都是对项目的环境和工具的配置
图标 .env.development 不高亮 => 装插件 DotENV
本节任务： 按照操作和讲解步骤，进行拉取代码，安装依赖，运行项目，阅读目录和文件的操作
项目运行机制和代码注释
目标: 了解当前模板的基本运行机制和基础架构
眼花缭乱的目录和文件到底是怎么工作的？ 我们进行一下最基本的讲解，帮助大家更好的去理解和开发
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
main.js
删除 main.js **mock数据的部分，删除mock**文件夹，我们开发的时候用不到模拟数据 (有线上接口)
同时，请删除掉**vue.config.js**中 devServer 中配的, 约 39 行的 before: require('./mock/mock-server.js')
App.vue
permission.js
src下，除了main.js还有两个文件，
permission.js和**settings.js**
permission.js 是控制页面登录权限(路由访问)的文件， 我们可以先将此处的代码进行注释或删除，现在还没做登录拦截
等我们构建权限功能时，再从0到1进行构建。
注释代码
settings.js则是对于一些项目信息的配置，里面有三个属性title(项目名称)，fixedHeader（固定头部），
sidebarLogo（显示左侧菜单logo）
**settings.js**中的文件在其他的位置会引用到，所以这里暂时不去对该文件进行变动
Vuex结构
当前的Vuex结构采用了模块形式进行管理共享状态，其架构如下
其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。
user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置
export default {
namespaced: true,
state: {},
mutations: {},
actions: {}
}
同时，由于getters中引用了user中的状态，所以我们将getters中的状态改为
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device
}
export default getters
scss
该项目还使用了scss作为css的扩展语言，在**
styles**目录下，我们可以发现scss的相关文件
icons
icons的结构如下
以上就是vue-element-admin的基础和介绍,希望大家在这过程中体会 一个基础的模板运行机制
本节任务： 大家根据目录结构和设计图，对以上的内容进行了解
建立远程Git仓库并完成初始提交
目标 在码云或者github上建立相应的远程仓库,并将代码分支提交
建立远程仓库
远程仓库建立只需要在网站上直接操作即可
本地项目提交
注意: 由于我们之前的项目是直接 **克隆**而来,里面拥有原来的提交记录, 需要先将原来的 **.git**文件夹删除掉
并且对项目进行git初始化
$ git init #初始化项目
$ git add . #将修改添加到暂存
$ git commit -m '人资项目初始化' #将暂存提到本地仓库
查看版本日志
$ git log --oneline #查看版本日志
推送到远程仓库
推送到远程仓库一般先将**远程仓库地址**用本地仓库别名代替
$ git remote add origin <远程仓库地址> #添加远程仓库地址
当我们不清楚自己的仓库对应的origin地址时, 我们可以通过命令查看当前的远程仓库地址
$ git remote #查看本地仓库的远程仓库地址映射
推送master分支到远程仓库
$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址
本节任务: 根据以上操作,将拉取下的项目提交到自己的仓库里面
API模块 和 请求封装模块介绍
目标 介绍API模块的单独请求和 request模块的封装
Axios的拦截器介绍
该项目采用了API的单独模块封装和axios拦截器的方式进行开发
axios的拦截器原理如下
axios拦截器
axios作为网络请求的第三方工具, 可以进行请求和响应的拦截
通过create创建了一个新的axios实例
// 创建了一个新的axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // 超时时间
})
请求拦截器
请求拦截器主要处理 token的**统一注入问题**
// axios的请求拦截器
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
响应拦截器
响应拦截器主要处理 返回的**数据异常** 和**数据结构**问题
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码
import axios from 'axios'
// 创建一个axios的实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 5000 // request timeout
})
export default service // 导出axios实例
api模块的单独封装
我们习惯性的将所有的网络请求 放置在 api 目录下统一管理, 按照模块进行划分
单独封装代码
import request from '@/utils/request'
export function login(data) {
return request({
url: '/vue-admin-template/user/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/vue-admin-template/user/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'post'
})
}
上面代码中,使用了封装的request工具,每个接口的请求都单独**导出**了一个方法,这样做的好处就是,任何位置需要请求的话,可以直接引用我们导出的请求方法
为了后续更好的开发，我们可以先将user.js代码的方法设置为空，后续在进行更正
// import request from '@/utils/request'
export function login(data) {
}
export function getInfo(token) {
}
export function logout() {
}
提交代码
本节任务： 将request和用户模块的代码进行清理，理解request和模块封装
公共资源图片和公共样式
目标 将一些公共的图片和样式资源放入到 规定目录中
我们已经将整体的基础模块进行了简单的介绍，接下来，我们需要将该项目所用到的图片和样式进行统一的处理
图片资源
图片资源在课程资料的图片文件中，我们只需要将**
common**文件夹拷贝放置到 **assets**目录即可
样式
样式资源在 资源/样式目录下
修改**variables.scss**
新增**common.scss**
我们在**variables.scss**添加了一些基础的变量值
我们提供了 一份公共的**common.scss**样式,里面内置了一部分内容的样式,在开发期间可以帮助我们快速的实现页面样式和布局
将两个文件放置到styles目录下，然后在**index.scss**中引入该样式
@import './common.scss'; //引入common.scss样式表
提交代码
本节注意：注意在scss文件中，通过 @import 引入其他样式文件，需要注意最后加分号，否则会报错
本节任务 将公共资源的图片和样式放置到规定位置
人力资源的环境搭建
vue-element-admin的介绍
问题: 这类的系统太常见了! 一切从零开始, 效率太低! vue-element-admin 是一个后台集成方案, 我们开发一般会参考开发
基础模板 - 拉取代码运行
说明: 环境没有问题, 我们需要在原有的 基础模板 上改造开发, 所以要先拉取代码
讲解内容:
- git 拉取代码
- 安装依赖
- 启动项目
本节目标: 拉取代码, 运行项目
问题小结: 运行项目的命令是什么?
基础模板 - 目录结构
说明: 本项目已经生成了一个基本的开发架子，我们下面来看看这个架子
讲解内容:
-
架子目录整体介绍
mock文件夹: 模拟后台接口, （mockjs 模拟接口的框架）
tests文件夹: 做功能测试的, 写脚本的 （jest测试框架）
-
环境变量文件的介绍
高亮
baseURL
本节目标: 大致认识项目架子的整体目录
问题小结: 三个 .env 开头的文件是什么文件 ?
08- 基础模板 - src 目录的介绍
说明: 我们开发最核心的就是 src 目录, 所以来看看 src 目录
讲解内容:
- src 目录概览
本节目标: 熟悉 src 目录
基础模板 - 分析路由
说明: 除了main.js, 最核心的就是路由
讲解内容:
-
查看 router / index.js
一级路由 登录
一级路由 404
一级路由 首页(架子layout组件)下面, 可以嵌套二级路由
-
layout架子
左边侧边栏组件
头部导航组件
中间主体组件 =》 router-view 二级路由出口
本节目标: 熟悉整个项目的路由设计
基础模板 - permission.js
说明: src下，除了main.js还有两个文件，permission.js 和**settings.js**, 我们来看看 permission.js
讲解内容:
- permission.js 文件的作用: 进行登录访问权限控制
- permission.js 文件的内容解读 - 写完之后可以参考查阅
- 删除 permission.js 的内容 - 将来自己编写
问题小结:
- src 目录下的 permission.js 文件有什么用 ?
基础模板 - setting.js (了解)
说明: 除了 permission.js 还有一个 setting.js 文件
讲解内容:
- settings.js 文件的基本查看
问题小结:
- src目录下的 settings 的文件有什么作用 ?
基础模板 - vuex 目录解析
说明: 一般项目大了, 一定会分模块开发, 我们这个项目默认也进行模块的拆分
讲解内容:
- vuex 模块的查阅
- 清除 user.js 模块的内容 (将来我们自己写)
问题小结:
- 以后工作中, 如果项目大了, 我们需要对vuex分模块管理么?
基础模板 - styles 和icons目录
说明：该项目还使用了scss作为css的扩展语言，
在**styles**目录下，我们可以发现scss的相关文件
基础模板 - git 管理项目
说明：使用 git 管理项目，进行代码备份
基础模板- 改造request.js
说明: 这个架子对于请求模块的封装 和 我们之前的封装是类似的
讲解内容:
- 查阅 API 模块的目录
- 查阅 utils 目录 request.js 的封装, 改造成自己的模块
