一般组件使用
element-ui的基本使用还是十分简单的，首先根据文档的步骤进行安装，导入需要的样式即可，这一块直接看文档就已经说明的很清楚了：文档链接。接着，你只需要找到你想要的样式，然后点开详细代码，复制到你的.vue文件里那么就可以了，例如直接复制官方提供的radio组件(链接)的第一个代码：
<template>
<div>
<!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</template>
<script>
export default {
data() {
return {
radio: "1"
};
}
};
</script>
可以看出element-ui的上手使用还是挺容易的，在理想情况下，只需要以下步骤：
找想要的样式组件 复制代码到对应的.vue文件 修改对应的数据 非组件样式使用 官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法
图标样式使用
官方提供了很多图标样式（链接），通过阅读文档可以发现：一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（有icon属性的组件，例如el-button），设置icon属性为对应的图标名即可
指令样式使用
例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了，举例：
<template>
<div>
<div v-loading="isLoading">这块内容使用v-loading指令，true时loading</div>
<el-button @click=handle>{{clickText}}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
clickText: "取消loading"
}
},
methods:{
handle(){
this.isLoading = !this.isLoading
if (this.isLoading) {
this.clickText = "取消loading"
} else {
this.clickText = "继续loading"
}
}
}
};
</script>
事件样式使用
例如Message消息提示（链接），其提供是也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性选项即可
文档读法
element-ui文档提供了很多示例代码，一般情况下我们直接拷下示例代码稍微看着改改数据之类的就够用了。但是在某些场景下，我们可能又需要使用到一些特殊的功能和属性，而这些功能属性一般在官方提供的组件中都已经内置了，所以我们可以直接先从文档中寻找查看是否有属性或者方法等能够满足我们的需求，从而避免重复造轮子。下面就来说明下文档里提供的属性、方法等如何阅读以及使用。
slot读法
slot的使用和普通的slot用法没什么区别，直接在该组件当中定义一个标签，并设置该标签的slot属性即可，还是拿el-input组件举例，其Input slots下提供了prepend（输入框头部内容，只对 type="text" 有效），下面是使用了该slot的代码示例：
<template>
<div>
<el-input v-model="name">
<template slot="prepend">aaa</template>
<!-- 定义一个template标签，设置slot为对应的值，里面插入对应的内容，不一定要用template标签，别的也可以 -->
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
name: "aaa"
};
}
};
</script>
method读法
method就是该组件内置的方法，使用时可以通过ref属性调用，使用步骤如下：
组件设置ref属性（具体ref属性用法参考：www.cnblogs.com/wu50401/p/1… 通过this.$refs.ref属性名.方法()调用组件自身的method方法
常见问题
样式修改不生效问题 element-ui本身提供了很多样式，但有时候想要稍微修改一下组件里面的样式，发现修改样式竟然不生效？ 别急，下面两种办法可以搞定：
方法一：在设置样式属性时，前面加上>>>来修改样式，但是这个在使用scss的时候可能不会生效，那么此时就使用方法二 方法二：使用/deep/（记得用空格隔开）来修改样式，本质上和>>>是一样的，相当于别名，举例：
/deep/ .el-xxx {
...
}
方法三：如果上面的也都不行，就使用::v-deep（记得用空格隔开）试试，举例：
::v-deep .el-xxx {
...
}
查了下原因，原来是因为由于提供的组件样式设置了scope关键字，导致其样式处于局部，我们无法随便更改，如果非要修改局部的样式，那么就使用上面提供的关键字来实现。 （这也不算是element-ui的问题，在vue的组件化开发中就是规定如此，只不过平常自己开发的组件样式都可以自己规定，所以一般不会发现这个问题...） element-ui导航栏报错：vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"} 当多次访问同一路由时会报的错，虽然报错了，但本身不影响使用，只需要将该报错屏蔽即可，参考： www.jianshu.com/p/af280206d…
