（一）环境搭建

一、搭建前端开发环境

1:开发软件：vscode

用于编写项目，其实也可以用其他ide工具，比如hbuilder，idea等，看教程Hbuilder挺好的，可以自动插入代码。

2、安装node、npm

node安装好后，npm会自动安装。而node有很多版本，不同版本之间有兼容性问题，因此需要特别注意。类似于anaconda管理python版本环境，可以用nvm管理node版本

安装nvm：nvm/README.md at master · nvm-sh/nvm · GitHub

安装的时候采用了install script 安装，安装后即可使用

查看版本：

nvm -v

查看可安装的node版本：

nvm ls-remote

安装指定版本

nvm install 版本号

注意，项目中如果使用了vue，请注意node版本，否则会有兼容性问题，比如现在node最新版本号是16，但是在编译时和一些插件不兼容，因此用了14的版本

3：增加npm镜像源

node安装好后，npm也自动安装好了，现在可以用npm命令安装其他的插件，但是npm默认是从国外的服务器下载，有时候网速很慢，需要增加国内淘宝的镜像源。（或者安装cnpm，但视频教程以及网上一些说法不建议，据说是不稳定的原因）

npm config set registry https://registry.npm.taobao.org

或者安装nrm后添加，nrm工具是管理镜像源的工具，可以先安装，再添加（这是我猜的方法）

这两个都是镜像源，有什么区别，暂时还不得而知，先留下个小问题

npm install nrm

nrm add taobao https://registry.npm.taobao.org

nrm网站：mirrors / Pana / nrm · CODE CHINA

4:安装vue-cli 

这个是vue框架，可以使用脚手架快速搭建一个项目，相当于maven，一个项目模版安装 | Vue CLI

注意，为了和element uI兼容，不要安装4.5以上版本，最新版本4.5以上会有一些列问题，虽然可以一个一个修复，但实在麻烦，这里安装视频教程版本4.4.1

npm install -g @vue/cli@4.4.1

5:创建后新建项目，并添加到git上

vue create 项目名称

以下是csdn到帮助命令。在实际测试后，发现，vue create后，git已经自动add并commit了，因此只需要和远程仓库绑定即可：

git remote add origin git@codechina.csdn.net:chenfeng201/yeb-chenfeng.git

再进行推送：

git push -u origin master

附：命令行指引

你还可以按照以下说明从计算机中上传现有文件。

Git 全局设置

git config --global user.name "chenfeng201"
git config --global user.email "chenfeng201102@126.com"

创建一个新仓库

git clone git@codechina.csdn.net:chenfeng201/yeb-chenfeng.git
cd yeb-chenfeng
touch README.md
git add README.md
git commit -m "add README"
git push -u origin master

推送现有文件夹

cd existing_folder
git init
git remote add origin git@codechina.csdn.net:chenfeng201/yeb-chenfeng.git
git add .
git commit -m "Initial commit"
git push -u origin master

推送现有的 Git 仓库

cd existing_repo
git remote rename origin old-origin
git remote add origin git@codechina.csdn.net:chenfeng201/yeb-chenfeng.git
git push -u origin --all
git push -u origin --tags

6:安装element插件

因为是vue4.5版本，因此需要使用element-plus插件，安装方式：

npm install element-plus --save

具体使用看官方文档，这部分与教程不同

注：这里遇到了问题，element-plus有很多写法与教程不一致，因此vuecli使用4.4版本，element-ui使用2版本

安装：npm i element-ui -S

7:后端搭建

这里的教程需要调用后端的接口，因此需要部署后端环境

后端项目地址：

• GitHub：https://github.com/lenve/vhr

• Gitee：https://gitee.com/lenve/vhr

搭建教程：

前后端分离项目(微人事)常见部署问题汇总

至此，项目搭建完毕，可以开发项目了

在此感谢项目作者