Vue2+Springboot前后端分离项目(一)

人生难得几回搏，此时不搏待何时?

距离上一篇博客已经过去一个多月，在这一个多一月中，做了啥呢，写了个前后端分离的博客项目。接下来我们会先通过对Vue的学习，慢慢的引入到该项目中来。

一、目录

  1、技术栈介绍
  2、Vue介绍，使用Vue的Vue.cli脚手架直接搭建
  3、简单介绍前端axios向异步向后端发送请求
  4、使用Element UI 优化前端页面
  5、前端路由和登录拦截
  6、其他一些模块的实现

**

二、技术栈介绍

1.前端技术栈
1.Vue.js
2.ElementUI
3.axios

2.后端技术栈
1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Mybatis-plus

3.数据库
1.MySQL
2.Redis

在开发过程中还会不断用到一些新的技术，有必要的我会增添上去。

三、Vue介绍
1、如果有小伙伴没学习过Vue建议先去自学一下哈.
Vue中文文档

2、安装Vue.cli
因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 Node.js，首页即可下载。

图中左边是长期支持版本，右边是当前版本，下载哪个都行，我一般选择长期支持版本。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号(输入 npm -g install npm ，将 npm 更新至最新版本。)

至于cnpm，我自己比较习惯用npm，就没去试过cnpm了。cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

之后，使用 npm install -g vue-cli 安装脚手架。

注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，但使用新版本创建的项目依赖与这个教程不太相符，折腾起来比较麻烦。

3、构建前端项目
直接使用命令行构建项目。首先，进入到我们的工作文件夹中，我在 D 盘新建了一个叫 workspace 的文件夹，大家可以自行选择位置。

然后执行命令 vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。

在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 wj-vue，直接回车确认就行。

这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。

还有是否使用 es-lint，这玩意儿挺烦的，但为了代码质量先将就一下吧。

接下来等待项目构建完成就 OK 了。
下载成功后，可以去安装目录查看
接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev

项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev

访问 http://localhost:8080，查看网页 demo，大工告成！

四、使用IDEA创建Vue项目


如果你新创建的项目中，没有出现如下Vue小绿标

你就必须得手动去配置,如下图所示,先点击右边加号

前面基础工作，我就介绍得这，目的是为了，不让篇幅显得太过冗余.