Vue+ElementUI+express+axios+Mongodb 实现简单的登录验证

一.   开发工具：Webstrom，电脑需要安装有node，vue-cli，mongo数据库

二.   在本地创建一个文件夹，使用Vue-CLI初始化项目，命名为vuelogin，初始化完成后，分别输入命令cd vuelogin，npm run dev，查看是否正常运行(一般都可以)

    2.1  用Webstrom打开vuelogin， 在项目下面的Terminal，输入以下安装命令

npm install element-ui --save
npm install axios --save

  2.2   src > main.js 代码：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入axios
import axios from  'axios'
// 挂载到vue的原型上
Vue.prototype.axios = axios;

Vue.config.productionTip = false;

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

  2.3   src > components 文件夹下新建 login.vue，代码如下：

<template>
  <div class="login">
    <!-- 登录表单 -->
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
      <h1><i class="el-icon-switch-button" style="margin-right: 10px;margin-left: 30px"></i>VueX登录表单</h1>

      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username" autocomplete="off">&l