官網(wǎng): https://element.eleme.cn/#/zh-CN/component/installation
1.安裝
安裝命令: npm i element-ui -S
在main.js中完整引入Element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//Vue.use(Element, { size: 'small', zIndex: 3000 });//Element全局配置對(duì)象,size 用于改變組件的默認(rèn)尺寸,zIndex 設(shè)置彈框的初始 z-index(默認(rèn)值:2000)
Vue.use(ElementUI);
2.按需引入:
先安裝 babel-plugin-component依賴,命令: npm install babel-plugin-component -D
然后再打開項(xiàng)目根目錄中的 babel.config.js ,將下面的配置粘貼進(jìn)去:(注意,官方文檔中此步驟是錯(cuò)誤的)
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
局部按需引入組件的使用示例:
<script>
import {Button} from 'element-ui';
components:{
"el-button":Button
}
<el-button type="primary">主要的按鈕</el-button>
全局按需引入組件的使用示例:在main.js中
import { Button, Select } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };//Element全局配置對(duì)象,size 用于改變組件的默認(rèn)尺寸,zIndex 設(shè)置彈框的初始 z-index(默認(rèn)值:2000)
Vue.use(Button)
Vue.use(Select)