一、學好elementui布局的幾點注意事項

elementui這個技術是餓了么公司開發并向業界開源使用的，其是在vue框架的基礎上開發出來的，因此vue的前端基礎掌握學好是學習elementui的必要前提。

vue-cli腳手架工程是企業最常用的搭建前端項目工程化的手段，掌握此項技術可以讓開發者快速適應企業中的開發流程，因此學習elementui組件化布局時，有必要針對以上兩個技術做一下了解和使用，這樣學習起來就不會太痛苦。

二、elementui組件化練手布局入門前言

隨著互聯網行業的興起和前后端分離團隊開發的大行其道，vue被越來越多的國內開發人員所使用，而elementui作為vue唯一核心的官方指定ui框架，重要程序不言而喻，越來越多的企業公司也是默認使用elementui作為管理后臺前端的ui布局首選。

之所以要學習elementui布局框架，首先，是因為該框架基于vue封裝和開發了很多可以直接拿來就用的組件，讓我們的前端vue開發變得快速和方便，其次，該框架的組件布局搭建出來的界面 美觀簡潔，給人一種清新不凌亂的新穎感，上手應用起來確實簡單的很，沒有什么學習成本。

有了上文說到的兩個基礎必要條件之后，那么接下來學習elementui簡直是非常的輕松和容易，并不需要我們背誦或者記住任何知識點，我們只需要到elementui官網，找到他們的組件和樣式案例，直接將符合我們要求的組件代碼復制到項目中使用即可，你說是不是很簡單呢？

三、Elementui安裝使用說明

一般企業項目開發中使用element時不會直接在vue中使用，而是使用腳手架工程的方式應用，因為企業中主打前后端分離的工程化開發模式，使用時只需要點開餓了么ui官網，找到組件那一欄，在組件里面去找我們需要的各類組件使用即可，比如：表單組件、分頁組件、菜單組件等等。

官網提供兩種安裝方式，第一種就是基于腳手架的方式，使用npm命令安裝即可，這是我們最先推薦的使用方式，第二種則是普通安裝，不基于腳手架的方式，頁面中引入cdn加速的js和css文件加載使用，此種方式僅僅適合練習使用，因為它不適合應用在前后端分離的開發模式下。

四、elementui菜鳥組件布局入門精通視頻教程信息

1、課程大小：2.10GB

2、課程課時：共計28課時

3、播放格式：（mp4視頻格式）百度云網盤在線播放、下載視頻播放器播放、不加密

4、技術架構：Vue+Elementui+Vue-cli

5、課件說明：教程課程涵蓋素材、代碼、筆記資料

以下是Elementui入門精通視頻教程具體課程大綱：

1）Element UI框架的整體介紹與使用場景說明

2）介紹element UI的兩種常見的安裝方式

3）下載安裝使用和基本的頁面布局

4）官網找到組件欄目選擇各式各樣的組件兒使用

5）最基本的菜單組件和按鈕組件布局

6）整體頁面的劃分與容器布局

7）表單組件與表格組件與分頁組件分別應用在項目案例中

8）單選框組件和多選框組件的基本使用

9）表單的各種文本框組件

10）表單的單選的下拉框與多項選擇的下拉框組件使用

11）文件上傳與文件下載組件使用

12）消息提示框模態框組件應用

13）表格組件和分頁組件的布局與使用

14）其他公司中常用的各個組件的demo演練

15）開發一個五臟俱全小案例實戰綜合應用elementui各種組件

16）日期組件和分頁組件的布局使用和后端的跳轉調用

17）Element UI課程的完善回顧總結與答疑

圖一：elementui菜鳥組件布局入門精通課程詳情