vue.js+iview+springboot搭建一个前后端分离登陆demo

今天的文章介绍的是vue.js+iview+springboot来搭建一个简单的前后端分离登录demo。

（项目目录在最后）

一、前端（vue.js+iview）

• 1.新建一个静态的网页项目，这里我给项目取名为login

01.png

02.png

• 2.初始化包结构

05.png

06.png

• 3.安装iview

首先先停止vue项目（在控制台按Ctrl+C，再按Y停止项目），停止以后执行命令
npm install --save iview

07.png

 

• 4.在main.js中加入iview

加入的代码为
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)
如果main.js代码报错，是因为没有支持ES6的语法，（alt+回车可以转换为ES6的语法）

08.png

转换为ES6语法，并且引入iview

09.png

到此为止iview就算是引入完成了，现在重新启动一下项目（npm run dev）就可以来使用iview的样式了。

 

• 5.使用iview

首先，我们在工程目录componets下新建一个Login.vue文件。并且登录iview的官网找到Form表单组件。复制代码到Login.vue中

10.png

为了方便，我直接贴出代码