Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用

人力资源的环境搭建

1.0 vue-element-admin的了解和介绍

vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/)

1. 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
2. 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.
3. 它有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.

如果你想查看该项目的具体功能和效果，可以拉取代码，启动进行预览

$ git clone https://github.com/PanJiaChen/vue-element-admin.git  #拉取代码
$ cd vue-element-admin #切换到具体目录下
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可知晓启动命令

4. 所以： 我们一般都是使用他的 基础模板 来进行二次开发
   包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发

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

1. 查看node 和 npm的版本
   nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的**npm**功能来管理依赖包

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

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

git --version #查看git安装版本  （git 不是使用-v）

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

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

4. vscode编辑器 加 插件 + vetur + eslint

> vetur是基于 单文件组件开发的支持插件, eslint是 基于代码校验的插件工具

除此之外, eslint需要在vscode中进行一些参数的配置 
（在vscods 的设置里面添加）
{
    
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
   
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
   
        "source.fixAll.eslint": true
    }
}

3.0 项目模板启动

1. git拉取基础项目模板** (这里的 https 要改成 git)

git clone  https://github.com/