中台项目步骤

项目课设计

人力资源的环境搭建

vue-element-admin的了解和介绍

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

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

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

vue-element-admin 有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.

这里是官网地址

这里是线上demo地址

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

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

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

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

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

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

nodejs环境

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

查看node 和 npm的版本 (注意使用稳定版)

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

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中进行一些参数的配置

4、添加eslint配置

eslint作用：规范和统一代码格式

为什么要配置呢？

答：考虑到团队开发的时候