（3）从0开始搭建一个vue+springboot的前后端分离登陆案例

一、前端（vue.js+iview）

1.新建一个vue项目，取名login

使用vue init webpack login初始化一个vue项目。


然后进入login目录

2.初始化包结构

执行npm install（需要先安装node.js，参考node官网进行安装即可）

最后启动项目：npm run dev


打开浏览器，输入http://localhost:8080进行访问，看到如下页面表示启动成功。

3.安装iview

将刚才的项目停止（Ctrl+C，然后按Y确定），执行npm install --save iview

4.在项目中引入iview

使用vs-code打开项目，在main.js中加入以下代码

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)

整体文件如下：

5.使用iview

首先，在components目录下创建Login.vue文件。然后在iview官网找到Form表单组件。复制到Login.vue中。

Login.vue：

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inlin