Vue项目的搭建，Springboot项目的对接

一.vue环境的搭建

二.创建vue项目

1.进入代码文件夹，cmd窗口执行: vue create vue-to-springboot，直接enter，然后就会自动创建项目了。（需要等待一会会）

2.安装所需的一些依赖

1.vue add element (添加 element，一个 element 风格的 UI 框架)

2.npm install axios (安装 axios，用于网络请求)

3.npm install vuex --save(安装 Vuex，用于管理状态)

4.npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转)

3.使用vscode打开项目

现在需要创建相应功能的目录结构，进行分层开发，需要在 src 目录下创建下面几个目录

1）api (网络请求接口包)
2）router (路由配置包)
3）store (Vuex 状态管理包)
4）utils (工具包)
5）views (vue 视图包，存放所有 vue 代码，可根据功能模块进行相应分包)

 

完整项目下载：https://github.com/ChenXbFrank/vue-to-springboot

1.npm install 安装项目的依赖

2.npm run serve 启动服务

springboot项目就不介绍了，只是提供一个简单的接口供前端访问。

项目下载地址：https://github.com/ChenXbFrank/vue-login-java 启动项目。

4.测试

http://localhost:8080/#/  输入admin、123456测试

登陆成功！

账号密码输入错误，如图所示。

springboot和vue简单的前后端分离实现。

参考文章​​​​​​​