前言：

我们使用前端框架为ElementUI，和bootstrap差不多，但更适合VUE双向数据绑定和组件化的特性。

ElementUI官网： https://element.eleme.cn/#/zh-CN/component/installation

熟悉bootstrap的话，上手很快，ElementUI基本就是在bootstrap的基础上做的，但是相对bootstrap来说，个人觉得ElementUI组件种类更丰富一些。

1. 认识VUE项目工程

微服务和VUE入门教程(1): 搭建前端登录界面_vue

这里主要看两部分：

（1） src里面的文件，我们主要进行操作的，也是在这个文件夹里。

  • components：放置我们公用的组件，比如页面的导航栏等等
  • router： 前端的路由配置
  • App.vue:主要代码如下
<template>
  <div id="app">
    <img src="./assets/logo.png">  <!--这里就是我们在http://localhost:8080看到的logo-->
    <router-view/>
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

VUE是单页面前端框架，也就是说其他的组件都是放在一个页面中的，即放在App.vue这个页面中，我们可以尝试注释掉

，看看页面中会发生什么变化。

  • main.js： 重要的配置中心，我们引入一个配置组件，会加在这里。比如我们接下来会引入ElementUI，就会在这里通过import的方式引入

（2） index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>user-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

index.html里的代码是不是和我们以前编写的HTML文件很像。个人理解：我们编写的vue文件最终会编译成html，从而插入到这个文件中。在项目中，我们基本不会修改这个文件，唯一会修改的地方也许就是那个

了。

好了，vue的工程基本也就这样。下面我们开始动手开发。

2. 引入ElementUI

（1）下载ElementUI

在项目目录，右键cmd黑方框中输入： cnpm i element-ui -S

微服务和VUE入门教程(1): 搭建前端登录界面_java_02

下载完成后，可以在node_modules找到ElementUI文件夹，如图：

微服务和VUE入门教程(1): 搭建前端登录界面_微服务_03

（2） 在项目中引入ElementUI

打开main.js文件，通过import语句引入项目，然后使用Vue.use(ElementUI).将ElementUI加入到vue的开发环境中。

微服务和VUE入门教程(1): 搭建前端登录界面_html_04

接下来我们通过编写登录界面学习ElementUI的使用。

3. 编写登录界面

（1） 新建login.vue

在src/compontens/page/login文件夹中，新建login.vue

微服务和VUE入门教程(1): 搭建前端登录界面_微服务_05


让我们来分析一下生成的代码

<template>
    <!--添加我们常用的html代码-->
</template>

<script>
<!--这里添加js代码-->
    export default {
        name: "login"
    }
</script>

<style scoped>
<!--这里添加CSS代码,scoped代表只在此文件中有用-->
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
（2）编写相关代码

在ElementUI官网上我们可以找到Form表单的组件，选择适合自己的，复制到自己的文件中即可。

微服务和VUE入门教程(1): 搭建前端登录界面_微服务_06

贴上我的代码：（ps：真正用好ElementUI也不简单）

<template>
  <div class="signin-form">
    <el-form class="login-container" label-position="left"
             label-width="0px">
      <h3 class="login_title">系统登录</h3>
      <el-form-item>
        <el-input type="text" v-model="loginForm.username"
                  auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password"
                  auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'login',
    // 绑定的数据
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        //表单中字段验证规则
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        }
      }
    }
  }
</script>

<style scoped>
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px 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;
    text-align: center;
    color: #505458;
  }
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
（2）加入路由

虽然我们编写好的代码，但是我们还不能直接访问，我们需要添加路由。

打开router/index.js

微服务和VUE入门教程(1): 搭建前端登录界面_java_07

import login from '@/components/page/login/login.vue'
  • 1.

@代表从page文件下开始找，这里的login和下面红框中的component的login相对应。

{
      path: '/login',
      name: 'login',
      component: login
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

path：这个就是我们要输入的url。

name：没什么太大意义。

component： 组件，举例来说，通过“login”找到 import login from '@/components/page/login/login.vue’这里的login。从而找到该组件的地址。

保存一下，浏览器打开： http://localhost:8080/#/login

微服务和VUE入门教程(1): 搭建前端登录界面_html_08

有了我们编写的表单，还有一个神秘的logo。

接下来，我们打开App.vue，把下面这句话注释到，看看会发生什么奇迹。

<img src="./assets/logo.png">
  • 1.

是的，神秘的logo消失了，这样也能理解App.vue的意义了，我们编写的组件都会添加到这个vue页面中。对菜菜的我来说，很神奇的一件事。

微服务和VUE入门教程(1): 搭建前端登录界面_微服务_09

好了，登录界面的前端就ok了。为了实习前后端的交互，接下来，我们先编写一下后端的代码，把微服务的架构搭建一下。