vue中使用element-ui

**

在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官网
谢谢大家观看。