一、搭建vue脚手架

命令行进入到指定文件目录，开始输入下列指令：

// 全局安装 vue-cli
cnpm install --global vue-cli

// 创建一个基于 webpack 模板的新项目
vue init webpack my-project

// 项目名称（Project name 项目名称）
Project name my-project

// 项目描述，可以直接回车忽略不写
Project description A Vue.js project

// 项目创建者，可以直接回车忽略不写
Author is me

// 打包方式，直接回车可以了
Vue build standalone

// 路由还是安装吧，yes
Install vue-router?

// 这里我选择的是no
Use ESLint to lint your code?

// 直接回车
Pick an ESLint preset none

// 选no
Setup unit tests with Karma + Mocha?

// 选no
Setup e2e tests with Nightwatch?

接着是在命令行输入：
// 进入目录
cd my-project

// 安装所需要的模块
npm install

// 启动项目
npm run dev

完成之后会显示为这样：

在浏览器输入： localhost:8080即可打开页面。

vue脚手架搭建完成，进行下一步。

---

二、下载安装elementUI

命令行进入到项目所在目录，输入命令：npm install element-ui -S，等待安装完成即可。注意后面的S是大写的，这样可以将模块保存到json文件里，以便在其它环境再次启动项目。

下载完成之后，在main.js引入element-ui，并注册。

至此，element-ui引入完成，可直接使用。

---

三、构建登录页

在componens目录下创建一个登录页面login.vue

<template>
  <el-form :model="loginForm" status-icon :rules="rules2" ref="loginForm" label-width="100px" class="demo-ruleForm">
	  <el-form-item label="userName" prop="userName">
	    <el-input type="text" v-model="loginForm.userName" auto-complete="off"></el-input>
	  </el-form-item>

	  <el-form-item label="password" prop="password">
	    <el-input type="password" v-model="loginForm.password" auto-complete="off"></el-input>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="submitForm('loginForm')">login</el-button>
	    <el-button @click="resetForm('loginForm')">重置</el-button>
	  </el-form-item>
	</el-form>
</template>

<script>
import axios from 'axios'
export default {
    data() {
      var validateuser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (this.loginForm.checkPass !== '') {
            this.$refs.loginForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        loginForm: {
          userName: 'test',
          password: '123456'
        },
        rules2: {
          userName: [
            { validator: validateuser, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            axios.get('/api/login', {
              params: {
                userName: this.loginForm.userName,
                password: this.loginForm.password
              }
            })
            .then(res => {
              console.log(res)
              if(res.data.state = 1) {
                this.$router.push({path: '/home'})
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

再创建一个home.vue页面，登录成功跳转到该页面。

配置一下路由，位置：src  --  router文件夹下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

---

四、创建数据库

创建数据库建议使用Navicat for MySQL，简单方便。这个demo中，我只创建了一个用户表：user，只有2个字段，userName和password。

数据库名、用户名和密码自己设置就好，端口默认是3306，host可以使用localhost或者本机IP都可以。后面搭建后台服务时都需要用到。

---

五、搭建后台

1、在项目的根目录下创建一个server文件夹

1、然后在server文件夹里边创建5个文件：api.js、db.js、index.js、router.js、sqlMap.js

api.js

const mysql = require('mysql');
const dbConfig = require('./db');
const sqlMap = require('./sqlMap');

const pool = mysql.createPool({
  host: dbConfig.mysql.host,
  user: dbConfig.mysql.user,
  password: dbConfig.mysql.password,
  database: dbConfig.mysql.database,
  port: dbConfig.mysql.port,
  multipleStatements: true    // 多语句查询
});

module.exports = {
  login(req, res, next) {
    let userName = req.query.userName;
    let password = req.query.password;
    pool.getConnection((err,connection) => {
        var sql = sqlMap.selectUser;
        connection.query(sql, [userName, password], (err,result) => {
            // res.json(result);    // 向前端返回json格式的数据
            connection.release();
            let state = {}
            if(result.length > 0) {
              state.state = 1;
              res.json(state);
            } else {
              state.state = 0;
              res.json(state);
            }
        })
    })
  },
}

db.js

// 数据库连接配置
module.exports = {
  mysql: {
    host: '127.0.0.1',      // 新建数据库连接时的 主机名或ID地址 内容
    user: 'root', 
    database: 'databaseName',      // 数据库名
    password: 'password',   // root 密码
    port: '3306'
  }
}

index.js

const routerApi = require('./router');
const bodyParser = require('body-parser'); // post 数据需要
const express = require('express');
const app = express();

app.use(bodyParser.json());

// 后端api路由
app.use('/api', routerApi);

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

router.js

const express = require('express');
const router = express.Router();
const api = require('./api');

router.get('/login', (req, res, next) => {
  api.login(req, res, next);
});

module.exports = router;

sqlMap.js

var sqlMap = {
  selectUser: 'SELECT * FROM user WHERE user = ? AND pass = ? ',
}
  
module.exports = sqlMap;

---

登录页效果：

登录成功进入home页面效果：