趁着闲暇时间记录SpringBoot+Vue开发之路（更新中）

参考链接

首先要特别鸣谢以下大神的博客，如有侵权，请告知。
一步步使用SpringBoot结合Vue实现登录和用户管理功能——上
一步步使用SpringBoot结合Vue实现登录和用户管理功能——下
Node.js、npm、vue-cli 的安装配置环境变量
设置npm源为淘宝镜像
配置npm镜像源的几种方式

一、开发环境配置

1. 前端

1.1 Node.js安装

npm：Node.js下的包管理器，后面安装 vue-cli 脚手架或执行其他命令时需要，所以需要先安装Node.js。
官网下载地址

选择下面相应版本的安装包安装即可

安装完成可通过以下命令查看node和npm版本，看到以下版本号就说明安装成功了

node -v 

npm -v 

1.2 前端开发IDE

首推Visual Studio Code，微软出的一款强大的编译器，可定制化很强。
官网下载地址

注：另外还有Hbuilder，webstorm，sublime text，Atom也是非常优秀的前端编译器。

1.3 配置npm源

设置npm源为淘宝镜像

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

查看是否设置成功

npm config get registry

还原npm源

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

查看结果为淘宝镜像即为成功

注： 如果你想使用淘宝定制的cnpm命令行工具替代npm或者是个纯粹的强迫症患者 ，不想把npm下载文件放在在C盘，具体配置过程可参考以下链接
配置npm镜像源的几种方式

1.4 vue-cli脚手架

vue 3.x安装vue-cli脚手架的命令跟2.x的不一样，大家根据自己的需要去安装。
Vue CLI官方文档

安装vue 3.x脚手架

npm install -g @vue/cli

安装vue 2.x脚手架

npm install -g vue-cli

安装完之后可以执行以下命令查看是否安装成功

vue --version

若出现以下错误提示请参考 此系统禁止运行脚本解决办法
vue : 无法加载文件 C:\Users\YT\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本

使用图形化界面方式创建一个项目

注：上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

vue ui

使用命令方式创建一个项目

注：创建时会让你选择vue 2.x还是vue 3.x。

vue create vuedemo
cd vuedemo

编译并运行

npm run serve

1.5 Element UI

vue 3.x的出现也让Element UI迎来了新版本Element Plus。
Element Plus官方文档
当然基于vue 2.x的Element UI目前仍是主流。
Element UI官方文档

安装基于vue 3.x的 Element Plus

npm install element-plus --save

安装基于vue 2.x的 Element UI

npm i element-ui -S

安装 babel-plugin-import

npm install babel-plugin-import -D

2. 后端

2.1 JDK

2.2 后端开发IDE

2.3 maven

2.4 Mybatis-Plus

数据库