**
在vue中使用element-ui
**
本次用vue/cli创建项目,使用的是vue2.x的版本,使用vue create [项目名称],创建自己的项目。
下载element-ui
使用npm命令下载element-ui
npm i element-ui -S
下载完成后,就需要在main.js文件中引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
测试
在官网中复制一段代码作为测试。
<template>
<div>
<el-button @click="show = !show">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
效果图,如下:
点击效果的存在,由此element-ui引入成功,
官网上有更加详细的教程,以及组件的使用,建议去官网上学习。
element-ui官网
谢谢大家观看。