vue工程学习(6)之整合elementUI初次体验使用
前言
这个是使用cli3创建的vue工程
elementIU官网地址:https://element.element.cn/#/zh-CN
1.什么elementUI
Element是一套为开发者、设计者和产品经理准备的基于Vue2.0的桌面端组件库
简单来说就是一套开发好的组件,直接使用,非常简单,而已样式好看,省去了很多美工的工作
2.安装elementUI
推荐使用npm安装:npm -i element-ui -S
检查安装是否成功,看看package.json是否已经有引包
3.elementUI初次体验
在main.js里引入elementUI
加入代码:
import Element from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(Element);
完整代码
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue';
import router from './router';
Vue.use(Element);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
router,
}).$mount('#app');
初体使用,我可以去组件库拷贝一个按钮组件过来直接使用
新建组件:MyFirstElement.vue
<template>
<div>
<h1>按钮使用</h1>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: "MyFirstElement"
}
</script>
效果
4.组件使用
1)登录界面
Login.vue
<template>
<div>
<el-row>
<el-col :span="6" :offset="9">
<h1 style="text-align: center;">用户登录</h1>
<el-form :model="userFrom" status-icon :rules="rules" ref="userFrom" label-width="100px">
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="userFrom.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="userFrom.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('userFrom')">提交</el-button>
<el-button @click="resetForm('userFrom')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Login",
data() {
const validValeIsNull = (rule, value, callback) => {
if (value === '') {
callback(new Error('不能为空'));
}
callback();
};
return {
userFrom: {
name: '',
pass: '',
},
rules: {
name: [
{validator: validValeIsNull, trigger: 'blur'}
],
pass: [
{validator: validValeIsNull, trigger: 'blur'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
console.log('提交成功!!');
} else {
console.log('提交失败!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
2)简单布局
MyContainer.vue
<template>
<el-container style="border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<span>王小虎</span>
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "MyContainer",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(30).fill(item)
}
}
}
</script>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>