背景
虽然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 xxx@xxx.com
? 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’ }
第三部分 样式
前端示例
<h3 class=”login_title”>系统登录</h3><el-form-item label=”用户名”> <el-input v-model=”loginForm.username”></el-input></el-form-item><el-form-item label=”密码”> <el-input v-model=”loginForm.password”></el-input></el-form-item><el-form-item> <el-button type=”primary” @click=”onSubmit”>登陆</el-button> <el-button>取消</el-button></el-form-item>
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;
便宜美国vps text-align: center;
color: #505458;
}
“`
92731480
