SpringBoot+vue 项目搭建

背景

虽然vue 和Springboot出来很久了，但是自己在当时刚入门的时候还是遇到过很多问题。这里通过创建后台系统管理项目为背景，一步步使用vue和spingboot搭建，希望可以帮助入门同学快速使用vue和Springboot开发项目。

在这里不介绍一些关键vue语法，语法可以参考
- vue官网
- vue-router路由官网
- UI-Element官网

vue使用创建前端项目

vuew开发环境安装请参vue官网

使用命令如下命令创建一个前端工程

xxxSystem vue init webpack xxx-web

A newer version of vue-cli is available.

latest: 2.9.6
installed: 2.9.3

输入项目名称

? Project name sysweb

输入项目介绍

? Project description 系统前端项目
? Author lzh [email protected]
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm

经过上述步骤一个前端框架已经搭建好了。
或者直接使用ELment提供的[项目模板](https://github.com/ElementUI/theme-chalk-preview)
## 添加登陆界面
现在添加一个登陆界面

1. Element配置。安装ElementUi(类似java 配置maven)

npm i element-ui -S

在上面main.js中引入ElementUi

import ElementUI from ‘element-ui’;
Vue.use(ElementUI);

2. 新建Login.Vue文件。
每个vue文件包含三个部分。

第一部分 模板，或者简单理理解为UI展示模块

第二部分：脚本模块，包括前端业务逻辑和组件展示数据data。

export default { name: 'App' }

第三部分 样式

前端示例

系统登录

  


  


  登陆
  取消

export default { name: 'Login', data() { return { loginForm: { username: '', password: '' } } }, methods: { onSubmit() { this.$router.push("/home") } } }

.el-input {
max-width: 200px;
}

.login-form-container {
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}

.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}

“`