Vue+Element-UI快速搭建前端界面

Vue+Element-UI快速搭建前端界面

---

主要参考：

• Vue官方文档
• Element-UI官方文档

---

Vue主要使用总结

概述

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，因为其组件化的框架，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

组成

一个.vue文件主要分成三个层：template+script+style，在我的理解上，这其实是将html+js+css整合成一个组件，方便组件化，自底向上逐层设计。下面介绍几个项目开发中比较常用到的点：

v-model绑定数据

v-model是将view视图和持有的viewmodel数据给绑定起来的核心。参考样例：

<el-input class='login-input' v-model="loginForm.username" placeholder="用户名" autocomplete="off">el-input>

data() {
    //...
    return {
        loginForm: {
            username: '',
            password: ''
        },
        //...
    };
}

比如这里就是将data数据中loginForm字典中username的值与view视图中的一个输入框显示内容双向绑定。无论是data端修改数据还是输入框在浏览器中修改输入，都会导致loginForm.username值的改变。

v-for循环构造

比如项目中要展示评论队列信息，我们可以不用一个个手动添加控件，我们使用一个v-for循环构造，示例：

<el-select v-model="userInfoForm.major" slot="prepend" placeholder="学院">
  <el-option v-for="major in majorList" :key="major" :label="major" :value="major">el-option>
el-select>

例如实现下图这样一个选择框：

我们需要多个选择项，我们不可能连续手写十多个控件，因此我们创建一个majorList数组来描述所有学院，然后使用v-for来循环构造空间，简介代码块。

v-on:click点击处理

v-on:click用来实现控件delegate代理，例如这里执行的按钮回调：

<el-button v-on:click='finishButtonClick'> {{ buttonText }} el-button>

在script的methods段内写上finishButtonClick的回调函数：

methods: {
    finishButtonClick() {
      console.log('finish button click');
    }
}

beforeMount()

beforeMount主要用于渲染vue视图界面载入前，完成data和el数据的初始化：

beforeMount() {
  const task_id = this.$route.query.task_id;
  const Loading = this.$loading({
    lock: true,
    text: '正在从数据库获取数据中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  getTaskExtra(task_id).then(response => {
      const status = response.status;
      const data = response.data;
      if (status === 200) {
        const extra = data.data;
        this.itemText = [
          extra.courier_number,
          extra.delivery_locker,
          extra.pick_up_code,
          extra.private_info
        ];
        Loading.close();
      } else {
        throw data.error;
      }
    }).catch(err => {
      Loading.close();
      this.$message.error('获取信息失败：' + err);
    });
}

---

Element-UI主要组件总结

el-button

文档参考：el-button属性及方法介绍

我们盈小钱项目统一规划样式为半圆角按钮，我们可以修改按钮的占位字符，按钮宽高，按钮圆角，按钮的类型属性等，对于方法方便，主要还是调用按钮的点击处理。

el-input

项目统一规划，对于输入框，登陆注册界面的登录框为半圆角，其余模块界面为方块带corners，关于输入框，我们可以修改输入框的模式(密码模式等)、输入框宽高、圆角、输入框文字属性、输入框占位字符串。

el-menu

可以使用el-menu优雅地进行路由跳转导航：

<el-menu
	default-active="2"
 	class="el-menu-vertical-demo">
 	<el-menu-item index="1" class="nav-menu-item">
    <i class="el-icon-setting">i>
    <span slot="title">设置span>
  el-menu-item>
  <el-menu-item index="2">
    <i class="el-icon-menu">i>
    <router-link to="/mainpage/setting/info">个人资料router-link>
  el-menu-item>
  <el-menu-item index="3">
    <i class="el-icon-document">i>
    <router-link to="/mainpage/setting/privacy">隐私router-link>
  el-menu-item>
el-menu>

---

js正则表达式进行合法性判断

参考：

js常用正则表达式大全–如：数字，字符等

正则表达式使用示例：

// 8位数字的正则判断
var reg='^[0-9]{8}$';
var pattern = new RegExp(reg);
if(!pattern.test(this.userInfoForm.student_id)) {
  this.$message.error("请输入正确的8位数字中大学号哦?");
  return;
}

其余使用到的正则表达式：

// 手机号码判定
var reg = '^1[3-9][0-9]{9}$';
// 邮箱判定
var reg = '^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$';
// 6-18位由字母+数字+下划线组成的密码判定
var reg = '^([a-zA-Z0-9]|_){6,18}$';