Vue(三)：使用Vue组件库Element脚手架

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型.

Element四大设计原则

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

Element-UI安装

使用npm进行安装

安装完成，在main.js加入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在生成的App.vue中去掉about和home

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

在view中定义我们自己的vue组件

<template>
    <div style="display: flex;justify-content: center">
        <el-card class="box-card" style="width: 450px;margin-top: 100px">
            <div slot="header" class="clearfix">
                <span>登录</span>
            </div>
            <table>
                <tr>
                    <td>
                        <el-tag>用户名：</el-tag>
                    </td>
                    <td>
                        <el-input v-model="user.username" placeholder="请输入内容"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-tag>密&nbsp;&nbsp;&nbsp;码：</el-tag>
                    </td>
                    <td>
                        <el-input v-model="user.password" type="password" placeholder="请输入密码" @keydown.enter.native="Login"></el-input>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <el-button type="primary" style="width: 350px" @click="Login">登录</el-button>
                    </td>
                </tr>
            </table>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Hello",
        data(){
            return{
                user:{
                    username: "",
                    password: ""
                }
            }
        },
        methods:{
            Login(){
                alert(JSON.stringify(this.user));
            }
        }
    }
</script>

<style scoped>

</style>

在路由表中导入hello组件，并指定路由地址

import Vue from 'vue'
import Router from 'vue-router'
import Hello from './views/Hello'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }

    ]
})

启动项目

看看页面效果

点击登录

我们也可以输入密码之后直接按回车也可以进行登录，效果是一样的