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使用：

el-row的gutter屬性主要是用來設置元素的左右間隔值（padding）,例如:gutter=’50’，意思是內邊距的左邊為25px（padding-left），右邊距為25px（padding-right）

el-container嵌套里面的元素需要有一個block的元素包住，否則無法撐開容器

el-main、el-aside一些元素有overflow:auto，如果不想出現滾動條可以設置overflow:visible

Element-ui綁定事件使用@click.native

template不能添加css的class

如果需要覆蓋element-ui的默認樣式，style標簽不能添加scoped，可以在頁面添加多一個style或不加scoped，但是注意要加上模塊來添加class，防止出現重復

父元素設置了margin之后，如果子元素也設置margin會引發margin重疊https://www.jianshu.com/p/52a253eb90cb

修改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' // 路由組件樣式

對于需要全局修改element-ui的樣式，可以創建一個css文件(import ‘@/assets/css/reset.css’ // 全局或重置樣式)進行修改，如果只是想在組件修改就不需要放在reset.css了

這里就不做組件的使用介紹了，官網說得很清晰明了

總結

以上是生活随笔為你收集整理的element-ui简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。