目录
1什么是Element Ul
1.1 概述：
Element ，一套为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库。
1，Element UI 是基于Vue2.0的
2，Element UI提供一组组件
3，Element UI提供组件的参考实例，直接复制
1.2 功能结构
下面是基于Vue和Element的功能规划图：
2搭建环境
2.1创建vue项目（前端选用的Visual Studio Code编辑器）
首先进行创建项目：vue create day100；项目名可以自定义
创建会让选择一些配置：（后面会出一期详细介绍）
进入刚刚创建的目录下 cd .\day14_element_exam\
其次进行运行项目 npm run serve
即出现该页面证明vue项目创建成功：
2.2整合element UI
进入项目目录下面：
vue add element 执行该命令
3.布局容器
3.1布局容器
- 使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
步骤一：修改src/main.js 调整 element-ui 导入位置
步骤二：修改src/App.vue所有内容，配置一级路由
步骤三：配置路由
步骤四：编写Home.vue页面
Element - The world's most popular Vue UI frameworkn
进入官方网站：进入布局容器复制代码
复制到Home.vue
展示结果如下：
3.2reset.css
在上图中可以清晰看到整个boby中存在一圈空白，开发中通常选择重置
去官网复制相关代码：CSS Tools: Reset CSShttps://meyerweb.com/eric/tools/css/reset/
在vue项目中创建
- 并创建 assets/reset.css ,拷贝样式 (复制下面样式即可)
-
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }进入main.js中插入如图所示：
现在Home.vue展示页面内容为：
3.3跨屏填充
下面做一个跨屏填充现在效果如图所示：
第一步首页编写（App.vue）样式：如图所示
第二步Home.vue进行编写样式：如图所示
即可达到跨屏填充
4.表单
4.1简单表单：登录
下面做一个基于element ui的登录表单（Login.vue）
第一步：配置路由进行访问：如图所示
第二步骤编写Login.vue页面
第三步去官网element ui官网（网站链接已经放在上面）找到表单组件进行复制代码更改
选择该表单中合适代码：（下面是我的选用）
<template>
<div class="login">
<!-- 选择一组卡片 -->
<el-card class="login-card">
<div slot="header" class="clearfix">
<span>爱吃豆的土豆</span>
</div>
<el-form ref="form" :model="userVo" label-width="80px">
<el-form-item label="用户姓名">
<el-input
v-model="userVo.username"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="用户密码">
<el-input
placeholder="请输入密码"
v-model="userVo.password"
show-password
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "SpaceworkSpaLogin",
data() {
return {
//定义一个对象接收参数
userVo: {},
};
},
mounted() {},
methods: {},
};
</script>
<style>
.login-card{
width: 500px;
}
.login {
height: 100%;
/* flex样式呈现*/
display: flex;
/*垂直排列*/
flex-direction: column;
align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}
</style>最后完成效果:
4.2复杂表单：注册
效果图如下：
<template>
<div class="register">
<el-card class="register-card">
<div slot="header" class="clearfix">
<el-button type="text" prefix-icon="el-icon-s-home">注册</el-button>
</div>
<el-form label-position="left" label-width="80px" :model="user">
<el-form-item label="用户名">
<el-input
v-model="user.username"
placeholder="请输入用户名"
prefix-icon="el-icon-user"
></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input
placeholder="请输入密码"
v-model="user.password"
prefix-icon="el-icon-lock"
show-password
></el-input>
</el-form-item>
<el-form-item label="确认密码">
<el-input
placeholder="请输入确认密码"
v-model="user.repassword"
prefix-icon="el-icon-lock"
show-password
></el-input>
</el-form-item>
<el-form-item label="生日">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="user.birthday"
></el-date-picker>
</el-form-item>
<el-form-item label="学历">
<el-select v-model="user.education" placeholder="请选择学历">
<el-option label="本科" value="shanghai"></el-option>
<el-option label="硕士" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="user.hobbies">
<el-checkbox label="cy" name="type">抽烟</el-checkbox>
<el-checkbox label="hj" name="type">喝酒</el-checkbox>
<el-checkbox label="tf" name="type">烫头</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="婚否">
<el-switch v-model="user.marry"></el-switch>
</el-form-item>
<el-form-item label="省市县">
<div class="block">
<el-cascader
v-model="user.city"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
></el-cascader>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary">注册</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
<!-- {
{ user }} -->
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
user: {
hobbies: [],
sex:'2'
},
options:[{
value: 'prevence',
label: '江苏省',
children: [{
value: 'shi',
label: '宿迁市',
children: [{
value: 'xian',
label: '沭阳县'
}, {
value: 'xian',
label: '泗阳县'
},]
}]
}]
};
},
mounted() {},
methods: {
handleChange(value) {
console.log(value);
}
},
};
</script>
<style>
.register{
height: 100%;
/* flex样式呈现*/
display: flex;
/*垂直排列*/
flex-direction: column;
align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}
.register-card {
width: 500px;
}
</style>