Element UI

官網(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)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容