前言

前言
一、vue-element-admin简介
二、项目环境搭建
- 2.1 nodejs环境
- 2.2 git版本控制
- 2.3 vscode编辑器
三、拉取vue-element-admin基础模板作为项目模板
- 3.1 git拉取基础项目模板
- 3.2 项目目录解析
- 3.3 项目代码解析-main.js
- 3.3 项目代码解析-App.vue
- 3.4 项目代码解析-permission.js和settings.js
- 3.5 项目代码解析-Vuex
- 3.6 项目代码解析-scss
- 3.7 项目代码解析-icons
四、API模块和请求封装模块介绍
五、建立远程Git仓库并上传项目代码
- 5.1 建立远程仓库
- 5.2 本地项目提交
- 5.3 推送到远程仓库
六、公共资源图片和统一样式
总结

一、vue-element-admin简介

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现
它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件
它可以帮助我们快速搭建企业级中后台产品原型。官网： https://panjiachen.gitee.io/vue-element-admin-site/zh/作为开发人员，我们主要使用它提供的基础模板，包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板
我们可以直接在该模板上进行功能的扩展和项目的二次开发

二、项目环境搭建

2.1 nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用nodejs的npm功能来管理依赖包查看node和npm的版本：$ node -v #查看node版本
$ npm  -v #查看npm版本将npm设置成国内的淘宝镜像以提高下载速度：$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址

2.2 git版本控制

git版本控制工具是目前最为流行的分布式版本管理工具,代码的提交, 检出, 日志, 都需要通过git完成查看git安装版本：$ git --version #查看git安装版本

2.3 vscode编辑器

vscode编辑器是目前前端开发的编码利器， 以及丰富的插件系统，非常适合开发前端项目通过vscode编辑器安装插件：vetur + eslint
vetur是基于单文件组件开发的支持插件, eslint是基于代码校验的插件工具除此之外, eslint需要在vscode中进行一些参数的配置：{"eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

三、拉取vue-element-admin基础模板作为项目模板

3.1 git拉取基础项目模板

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  hrsaas #拉取基础模板到hrsaas目录
$ npm install  #定位到项目目录下执行，安装依赖
$ npm run dev #启动项目
若项目能正常启动则可进行下一步

3.2 项目目录解析

通过下载基础模板，我们已经得到了一个基本的开发框架，下面是整个项目的目录结构：

├── 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目录, 里面是所有的源代码和资源, 至于其他目录, 都是对项目的环境和工具的配置

3.3 项目代码解析-main.js

main.js作为整个项目的入口文件，它的作用如下图所示：

同时，main.js中还提供了模拟数据配置，在我们开发时是用不到的，所以要注释掉，具体操作如下：

注释掉main.js中mock数据的部分，删除src下的mock文件夹
同时，注释掉vue.config.js中的 before: require('./mock/mock-server.js')

3.3 项目代码解析-App.vue

App.vue作为根组件，它的作用如下图所示：

3.4 项目代码解析-permission.js和settings.js

permission.js 是控制页面登录权限的文件，这里使用了router的导航守卫
settings.js则是对于一些项目信息的配置，里面有三个属性 title(项目名称)，fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）

3.5 项目代码解析-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

3.6 项目代码解析-scss

当前项目还使用了scss作为css的扩展语言，在styles目录下，我们可以发现scss的相关文件，结构如下：

3.7 项目代码解析-icons

icons的作用是注册一个Vue组件，将svg目录下的所有的.svg后缀的文件全都引入到项目中

四、API模块和请求封装模块介绍

通过目录解析我们知道，API模块的作用是封装所有请求，按照模块进行划分，统一管理
以user.js模块为例：

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 }})
}

上面代码中，使用了封装的request工具，每个接口的请求都单独导出了一个方法,这样做的好处就是,任何位置需要请求的话,可以直接引用我们导出的请求方法
为了后续更好的开发，我们可以先将user.js代码的方法设置为空，后续在进行更正

request工具的作用是封装axios
axios定义在utils/request.js中，首先通过create创建了一个新的axios实例，然后使用axios的拦截器进行开发：

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例

五、建立远程Git仓库并上传项目代码

5.1 建立远程仓库

可使用Github或码云建立远程仓库

5.2 本地项目提交

$  git init  #初始化项目
$  git add . #将修改添加到暂存
$  git commit -m 'first commit' #将暂存提到本地仓库
$  git log #查看版本日志

5.3 推送到远程仓库

$ git remote add origin <远程仓库地址>  #添加远程仓库地址
$ git remote -v #查看本地仓库的远程仓库地址映射
$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址

六、公共资源图片和统一样式

项目开发用到的图片资源放置到 src/assets目录即可样式资源要放置到styles目录下，然后在index.scss中引入该样式@import './common.scss'; //引入common.scss样式表

总结

今天又开始开发新的项目，这个项目利用vue-element-admin基础模板进行二次开发，大大提高了开发效率

Vue项目实战之人力资源平台系统（一）框架介绍及项目环境搭建相关推荐

Vue项目实战之人力资源平台系统（十一）权限管理模块（上）
前言目录前言一.权限管理的设计思想二.给员工分配角色 2.1 分配角色弹窗效果图 2.1 新建分配角色对话框组件 2.2 获取角色列表 2.3 获取当前用户的角色信息 2.4 点击确定按钮给用 ...
Vue项目实战之人力资源平台系统（七）员工管理模块
前言目录前言一.封装一个通用的工具栏 1.1 通用工具栏效果图 1.2 组件基本布局 1.3 全局注册组件二.员工列表展示 2.1 员工列表页面效果图 2.2 员工列表页面基础布局 2.3 获 ...
Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
JAVA毕设项目社区电商平台系统（java+VUE+Mybatis+Maven+Mysql）
JAVA毕设项目社区电商平台系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Web ...
Springboot毕设项目连锁民宿平台系统kw3zf（java+VUE+Mybatis+Maven+Mysql）
Springboot毕设项目连锁民宿平台系统kw3zf(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HB ...
Springboot毕设项目连锁民宿平台系统686l0（java+VUE+Mybatis+Maven+Mysql）
Springboot毕设项目连锁民宿平台系统686l0(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HB ...
【.NET Core项目实战-统一认证平台】第十四章授权篇-自定义授权方式
上篇文章我介绍了如何强制令牌过期的实现,相信大家对IdentityServer4的验证流程有了更深的了解,本篇我将介绍如何使用自定义的授权方式集成老的业务系统验证,然后根据不同的客户端使用不同的认证方 ...
【.NET Core项目实战-统一认证平台】第十二章授权篇-深入理解JWT生成及验证流程...
上篇文章介绍了基于Ids4密码授权模式,从使用场景.原理分析.自定义帐户体系集成完整的介绍了密码授权模式的内容,并最后给出了三个思考问题,本篇就针对第一个思考问题详细的讲解下Ids4是如何生成acce ...
【.NET Core项目实战-统一认证平台】第十一章授权篇-密码授权模式
上篇文章介绍了基于Ids4客户端授权的原理及如何实现自定义的客户端授权,并配合网关实现了统一的授权异常返回值和权限配置等相关功能,本篇将介绍密码授权模式,从使用场景.源码剖析到具体实现详细讲解密码授权 ...

Vue项目实战之人力资源平台系统（一）框架介绍及项目环境搭建

前言

目录