全网最详细Vue-cli + springboot + mybatis搭建前后端分离项目保姆级教程

Vue+springboot+mybatis一直是非常适合新人练习的搭建前后端的框架、技术，本篇文章将详细讲解如何搭建出两个独立的项目来实现完全的前后端分离，并且在文章最后附上事例的源码。

搭建Vue脚手架

安装node.js和npm

从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
下载完成后，通过命令行node -v判断是否安装成功。

npm包是集成在node中的，同样可以通过命令行npm -v判断是否安装成功。

安装cnpm

由于海外项目npm经常下载速度缓慢，所以我们可以引入淘宝镜像cnpm，cnpm会每10分钟同步一次npm，以保证数据最新。
通过命令行安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后通过命令行cnpm-v判断是否安装成功。

使用方法就是将npm转换为cnpm，例如cnpm install vue

安装Vue

通过命令行安装Vue。

cnpm install vue

安装vue-cli脚手架构建工具

cnpm install --global vue-cli

创建项目

切换到项目目录，创建模版项目。

//project-name-front为项目名称
vue init webpack project-name-front
vue init webpack-simple project-name-front

根据提示有修改的修改，没有就一路回车。

安装完成。

通过Intellij打开项目，Edit Configuration。

运行项目，打开localhost:8080，查看是否配置成功。

引入ElementUI

ElementUI是一款前端开发非常实用的开源工具，非常适合配合Vue使用。通过命令npm i element-ui -S安装，并在main.js文件里添加以下代码。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

然后在HelloWorld.vue文件中随便引入一个ElementUI组建，在页面上看是否导入成功。

引入BootstrapVue

从2019年底，ElementUI团队就停止了维护，在这里推荐另一个开源的工具可以和ElementUI一起使用，这个就是BootstrapVue。根据开发文档，我们需要引入以下几个包。

Vue.js, Bootstrap, Popper.js, PortalVue

Vue.js之前已经安装完成了，所以我们只需安装下面三个包，分别执行一下几个命令。

npm install --save popper.js
npm install --save-dev bootstrap
npm install --save portal-vue

根据教程，安装bootstrap-vue

npm install vue bootstrap-vue bootstrap

在main.js文件中加入一下代码。

import {
    BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

同样在HelloWorld.vue文件中随便引入一个ElementUI组建，在页面上看是否导入成功。

搭建Springboot+mybatis后端

创建项目

通过Intellij创建springboot项目，并在pom文件中添加mybatis依赖。

		<!--mybat