#【博学谷学习记录】超强总结，用心分享|人资项目环境搭建＜一＞

人力资源项目基本介绍

环境搭建

vue-element-admin的了解和介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
vue-element-admin 有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.
这里是官网地址
这里是线上demo地址

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

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

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

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

检查 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