element-ui简单使用

1. 安装

npm i element-ui -S

2. 使用在main.js

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. sublime text安装element-ui代码片段插件

打开sublime text的安装目录，找到存放插件的目录，例如：

Sublime Text 3x64 > Data > Packages

把Element UI Snippets放在该目录下

4. 代码片段插件使用教程地址

https://packagecontrol.io/packages/Element UI Snippets

5. 使用说明

Element-ui使用：

1. el-row的gutter属性主要是用来设置元素的左右间隔值（padding）,例如:gutter=’50’，意思是内边距的左边为25px（padding-left），右边距为25px（padding-right）
2. el-container嵌套里面的元素需要有一个block的元素包住，否则无法撑开容器
3. el-main、el-aside一些元素有overflow:auto，如果不想出现滚动条可以设置overflow:visible
4. Element-ui绑定事件使用@click.native
5. template不能添加css的class
6. 如果需要覆盖element-ui的默认样式，style标签不能添加scoped，可以在页面添加多一个style或不加scoped，但是注意要加上模块来添加class，防止出现重复
7. 父元素设置了margin之后，如果子元素也设置margin会引发margin重叠
8. 修改elementui样式不能加scoped，否则无效，修改完后线上的样式却与本地不一样，原因是样式的引入顺序决定了打包顺序：

import 'element-ui/lib/theme-chalk/index.css' // element样式 
import '@/assets/css/reset.css' // 全局或重置样式
import App from './App' // App组件样式
import router from './router' // 路由组件样式

9. 对于需要全局修改element-ui的样式，可以创建一个css文件(import ‘@/assets/css/reset.css’ // 全局或重置样式)进行修改，如果只是想在组件修改就不需要放在reset.css了

转载于:https://www.jianshu.com/p/20f633168fee