資訊中心 Info
當前位置:愛尚教育 > 資訊中心 >
Element-ui入門使用
發布日期:2020-06-01 閱讀次數:

Element,一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫

 

安裝

npm 安裝

推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。


npm i element-ui -S

CDN

目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 文件即可開始使用。




<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">



<script src="https://unpkg.com/element-ui/lib/index.js">script>

快速上手

引入 Element

你可以引入整個 Element,或是根據需要僅引入部分組件。我們先介紹如何引入完整的 Element。

完整引入

在 main.js 中寫入以下內容:


import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';



Vue.use(ElementUI);



new Vue({

  el: '#app',

  render: h => h(App)

});

以上代碼便完成了 Element 的引入。需要注意的是,樣式文件需要單獨引入。

按需引入

借助 babel-plugin-component,我們可以只引入需要的組件,以達到減小項目體積的目的。

首先,安裝 babel-plugin-component:


npm install babel-plugin-component -D

然后,將 .babelrc 修改為:


{

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

接下來,如果你只希望引入部分組件,比如 Button 和 Select,那么需要在 main.js 中寫入以下內容:


import Vue from 'vue';

import { Button, Select } from 'element-ui';

import App from './App.vue';



Vue.component(Button.name, Button);

Vue.component(Select.name, Select);

/* 或寫為

 * Vue.use(Button)

 * Vue.use(Select)

 */



new Vue({

  el: '#app',

  render: h => h(App)

});

全局配置

在引入 Element 時,可以傳入一個全局配置對象。該對象目前支持 size 與 zIndex 字段。size 用于改變組件的默認尺寸,zIndex 設置彈框的初始 z-index(默認值:2000)。按照引入 Element 的方式,具體操作如下:

完整引入 Element:


import Vue from 'vue';

import Element from 'element-ui';

Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element:


import Vue from 'vue';

import { Button } from 'element-ui';



Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

Vue.use(Button);

按照以上設置,項目中所有擁有 size 屬性的組件的默認尺寸均為 'small',彈框的初始 z-index 為 3000。

 

課程體系
通知公告
富二代app破解版下载