第11讲：vue脚手架集成ElementUI_elementui脚手架

一、创建vue路由项目并添加ElementUI支持

ElementUI官方网站：ElementUI组件
创建路由项目请参考：路由开发
使用如下命令集成ElementUI

npm i element-ui -S
1

在src/main.js文件中引用ElementUI

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、案例：登陆页面

2.1、案例效果

2.2、完成页面效果

参考ElementUI官网：Form表单
参考ElementUI官网：Layout 布局

<template>
  <div>
    <!--将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。-->
    <el-row type="flex" justify="center">
      <el-col :span="8">
          <el-form :rules="rules" :model="ruleForm" ref="myForm" label-width="80px">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="ruleForm.userName" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passwd">
              <el-input show-password v-model="ruleForm.passwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doLogin()">登陆</el-button>
              <el-button @click="doRest">重置</el-button>
            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.3、完成表单校验

参考ElementUI官网：Form表单
参考ElementUI官网：Message 消息提示

<script>
export default{
  data(){
    return{
      //在el-form中使用:model属性绑定
      ruleForm:{
        userName: null,
        passwd: null
      },
      //在el-form中使用:rules属性绑定
      rules:{
        //名称必须和ruleForm中的属性名一致
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    }
  },
  methods:{
    doLogin(){
      //校验el-form中ref属性绑定的myForm表单
      this.$refs.myForm.validate((valid) => {
          if (valid) {
            this.$message({
              showClose: true, //可关闭
              message: this.ruleForm.userName+":"+this.ruleForm.passwd,
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true, //可关闭
              duration: 0, //停留时间，单位毫秒，0=不自动消失
              message: '表单校验失败',
              type: 'error'
            });
            return false;
          }
        });
    },
    doRest(){
      //表单重置
      this.$refs.myForm.resetFields();
    }
  }
}
</script>
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

2.4、运行程序

使用如下命令运行程序，浏览器输入http://localhost:8080/即可得到效果

npm run serve
1

二、案例：完成传统主页布局

使用Container 布局容器实现传统主页布局
参考ElementUI官网：Container 布局容器

2.1、案例效果

2.3、代码实现

<template>
  <div>
    <el-container>
      <el-header style="height:100px; background-color: aliceblue;">Header</el-header>
      <el-container>
        <el-aside style="width:200px; height:700px; background-color: antiquewhite;">aside</el-aside>
        <el-main style="height:700px; background-color: aquamarine;">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

三、案例源代码

脚手架安装elementUI.zip