HR-Saas（一）：项目基础环境搭建

人力资源的环境搭建

1. vue-element-admin的了解和介绍

目标: 学习和了解通用的vue后台集成方案**vue-element-admin**

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.

集成方案并不适合我们直接拿来进行二次开发，基础模板则是一个更好的选择

基础模板, 包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发

本节任务： 浏览vue-element-admin的文档，了解这个集成方案

2. 搭建项目前的一些基本准备

目标: 介绍搭建一个vue中台项目,需要环境和工具

接下来要做的是一个大型的项目，我们需要更好的环境准备和资源前置，所以提前检查我们的环境和资源

nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的**npm**功能来管理依赖包

查看node 和 npm的版本

$ node -v #查看node版本
$ npm  -v #查看npm版本

git版本控制

git版本控制工具是目前最为流行的分布式版本管理工具,代码的**提交, 检出, 日志**, 都需要通过git完成

查看git安装版本

$ git --version #查看git安装版本

npm淘宝镜像

npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像

设置淘宝镜像

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址

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

本项目的技术栈 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui

本节任务： 大家检查各自的开发环境和资源，尤其是npm的淘宝镜像额外需要注意

3. 项目模板启动和目录介绍

目标: 拉取项目的基础模板,并对目录进行介绍

vue-element-admin的基础 模板和我们之前开发的项目一样吗 ？本章节，我们对该项目目录进行一下介绍

git拉取基础项目模板

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  hrsaas #拉取基础模板到hrsaas目录

安装项目依赖（定位到项目目录下）

建议删除已有git

$ npm install  #安装依赖

启动项目

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

本节任务： 按照操作和讲解步骤，进行拉取代码，安装依赖，运行项目，阅读目录和文件的操作

本节注意 需要注意自己的npm是否已经设置了淘宝镜像

4. 项目运行机制和代码注释

目标: 了解当前模板的基本运行机制和基础架构

眼花缭乱的目录和文件到底是怎么工作的？ 我们进行一下最基本的讲解，帮助大家更好的去理解和开发

├── 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            # 配置文件

4.1 main.js

请在main.js中删除**mock数据的部分，删除src下的mock文件夹，我们开发的时候用不到模拟数据，如图

同时，删除掉vue.config.js**中的 before: require(’./mock/mock-server.js’)

4.2 App.vue

4.3 permission.js

src下，除了main.js还有两个文件，permission.js 和**settings.js**

permission.js 是控制页面登录权限的文件， 此处的代码没有经历构建过程会很难理解， 所以先将此处的代码进行注释，等我们构建权限功能时，再从0到1进行构建。

注释代码