Vue.js前端框架項(xiàng)目實(shí)戰(zhàn)（微課版） 課件 1.4 前端UI框架入門_第1頁
Vue.js前端框架項(xiàng)目實(shí)戰(zhàn)（微課版） 課件 1.4 前端UI框架入門_第2頁
Vue.js前端框架項(xiàng)目實(shí)戰(zhàn)（微課版） 課件 1.4 前端UI框架入門_第3頁
Vue.js前端框架項(xiàng)目實(shí)戰(zhàn)（微課版） 課件 1.4 前端UI框架入門_第4頁
Vue.js前端框架項(xiàng)目實(shí)戰(zhàn)（微課版） 課件 1.4 前端UI框架入門_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1.4前端UI框架入門前端框架技術(shù)與應(yīng)用FrontendFrameworks前端框架開發(fā)基礎(chǔ)在前端開發(fā)中，UI框架的出現(xiàn)極大地簡化了界面樣式的設(shè)計(jì)和實(shí)現(xiàn)，使開發(fā)過程更加高效。Element和ElementPlus是兩款由餓了么前端團(tuán)隊(duì)開源維護(hù)的優(yōu)秀UI框架，它們?yōu)殚_發(fā)者提供了豐富的組件庫，能夠幫助開發(fā)者快速構(gòu)建美觀且功能完備的頁面。這些框架不僅節(jié)省了編寫樣式的時(shí)間，還確保了頁面布局的合理性和風(fēng)格的統(tǒng)一性，即使是沒有專業(yè)設(shè)計(jì)師的團(tuán)隊(duì)，也能輕松實(shí)現(xiàn)高質(zhì)量的頁面設(shè)計(jì)。前言Element是基于Vue2.x的UI框架，而ElementPlus是其升級版本，專為Vue3.x設(shè)計(jì)，采用TypeScript和組合式API構(gòu)建，充分利用了Vue3的新特性。ElementPlus的官網(wǎng)提供了詳盡的開發(fā)文檔和示例代碼，便于開發(fā)者快速上手。其組件庫涵蓋了基礎(chǔ)、布局、表單、數(shù)據(jù)展示、導(dǎo)航和消息提示等六大類功能，滿足了大多數(shù)PC端項(xiàng)目的開發(fā)需求。此外，ElementPlus支持自定義主題，進(jìn)一步提升了靈活性。前端UI框架ElementPlus簡介1ElementPlus集成2ElementPlus組件

3ElementPlus布局目錄|CONTENT1ElementPlus集成

我們可以從ElementPlus中文官網(wǎng)上獲取最新版本。打開中文官網(wǎng)，單擊頂部菜單欄中的“指南”菜單，進(jìn)入指南頁面，在左側(cè)列表框中選擇“安裝”選項(xiàng)，進(jìn)入安裝頁面，查看安裝方式。ElementPlus框架提供兩種安裝方式：一種是瀏覽器直接引入，即通過HTML標(biāo)簽直接在瀏覽器中引入ElementPlus，之后即可使用全局變量ElementPlus；另一種是使用包管理器，如NPM、Yarn或pnpm等，具體操作將在后續(xù)章節(jié)中介紹。ElementPlus集成方式1ElementPlus集成

這里我們采用瀏覽器直接引入的方式。我們打開html-project項(xiàng)目中的第一個(gè)Vue.js頁面，即hello.html文件，找到官網(wǎng)安裝頁面中的相關(guān)代碼，復(fù)制粘貼到該頁面的<head>標(biāo)簽中，這樣就完成了該頁面對ElementPlus的引入，代碼如下。

<!--引入腳本，注意要放在vue腳本之后引入--><scriptsrc="unpkg網(wǎng)址/element-plus"></script>

<!--引入樣式--><linkrel="stylesheet"href="unpkg網(wǎng)址/element-plus/dist/index.css"/>直接引入

ElementPlus1ElementPlus集成

跟Vue.js腳本引入一樣，我們也可以對ElementPlus進(jìn)行本地自行托管。在html-project項(xiàng)目中，新建目錄static/element-plus/，下載ElementPlus的腳本文件和樣式文件，并放到該目錄下，如圖1-15所示。這樣就可以在頁面的<head>標(biāo)簽中引入本地自行托管的資源，代碼如下。<scriptsrc="./static/element-plus/index.full.js"></script><linkrel="stylesheet"href="./static/element-plus/index.css"/>本地自行托管ElementPlus1ElementPlus集成

通過以上方式成功引入ElementPlus后，還需要通過use()方法集成ElementPlus到Vue實(shí)例中。在Vue3中，use()是應(yīng)用實(shí)例的一個(gè)方法，用于集成插件。它的核心作用是將第三方庫或自定義功能全局集成到Vue應(yīng)用中。完成以上步驟就可以使用ElementPlus框架了。ElementPlus集成1ElementPlus集成

進(jìn)入ElementPlus中文官網(wǎng)，單擊頂部菜單欄中的“組件”菜單，打開組件頁面，任意選擇一個(gè)組件來觀察效果。在左側(cè)列表框中找到“Basic基礎(chǔ)組件”中的“Button按鈕”，復(fù)制“Primary”按鈕的代碼，并粘貼到頁面中.ElementPlus使用代碼如下：<el-buttontype="primary">Primary</el-button>打開頁面，可以看到該按鈕成功出現(xiàn)在頁面上。二、ElementPlus組件

ElementPlus有豐富的組件供前端開發(fā)者使用，包含基礎(chǔ)組件、配置組件、表單組件、數(shù)據(jù)展示組件、導(dǎo)航組件、反饋組件和其他組件七大類。二、ElementPlus組件在基礎(chǔ)組件中，有按鈕、邊框、色彩、布局容器、圖標(biāo)、布局、鏈接、文本、滾動(dòng)條、間距、排版這些組件，在前端開發(fā)中都是比較常用的。開發(fā)一個(gè)頁面，第一步就是要對頁面進(jìn)行整體布局，這時(shí)就可以用到布局容器組件。我們找到官方文檔中布局容器組件頁面中的常見頁面布局，采用第二種布局，即包含了Header、Main、Footer三大部分的布局，拷貝代碼到創(chuàng)建好的index.html頁面中?；A(chǔ)組件二、ElementPlus組件

ElementPlus框架提供了多種類型的導(dǎo)航組件，幫助我們根據(jù)實(shí)際需求快速構(gòu)建導(dǎo)航欄，實(shí)現(xiàn)高效布局。在ElementPlus的官方文檔中，可以找到“導(dǎo)航”這一類別的組件。點(diǎn)擊進(jìn)入后，你會(huì)看到包含多種導(dǎo)航欄樣式的組件列表。在這些組件中，菜單組件是常用的導(dǎo)航欄組件之一。2.導(dǎo)航組件二、ElementPlus組件

在學(xué)習(xí)JavaScript時(shí)，大家可能都接觸過使用Swiper組件來實(shí)現(xiàn)輪播圖效果?，F(xiàn)在，我們可以使用ElementPlus提供的走馬燈組件來更高效地實(shí)現(xiàn)類似功能。我們打開ElementPlus的官方文檔，找到數(shù)據(jù)展示這一類別中的走馬燈組件。選擇其中一個(gè)示例代碼，將其復(fù)制到index.html文件的<el-main>標(biāo)簽中，并做一些修改，做出如圖所示頁面效果。3.數(shù)據(jù)展示組件二、ElementPlus組件

表單是用戶與應(yīng)用程序交互的重要方式之一。ElementPlus作為一款功能強(qiáng)大的UI框架，提供了豐富且易于使用的表單組件，能夠幫助開發(fā)者快速構(gòu)建美觀、高效且功能豐富的表單界面。ElementPlus的表單組件基于Vue.js3的響應(yīng)式系統(tǒng)和組件化開發(fā)模式，提供了完整的表單解決方案。它不僅涵蓋了常見的表單元素，如輸入框、下拉選擇框、單選框、多選框、日期選擇器等，還提供了強(qiáng)大的表單驗(yàn)證功能，可以輕松實(shí)現(xiàn)對用戶輸入數(shù)據(jù)的驗(yàn)證和校驗(yàn)。關(guān)于表單組件的具體運(yùn)用，我們在后續(xù)章節(jié)中會(huì)講到。4.表單組件二、ElementPlus組件ElementPlus框架提供了一套完善的反饋組件體系，幫助開發(fā)者在用戶操作后即時(shí)傳遞清晰的狀態(tài)信息，提升交互體驗(yàn)與系統(tǒng)可感知性。反饋組件包括提示、對話框、抽屜、加載、消息提示、通知等具有豐富交互模式的組件。其中，消息提示（在代碼中寫為ElMessage）是高頻使用的核心組件之一。消息提示是輕量級全局提示，常用于表單提交、操作確認(rèn)等場景，支持成功、警告、錯(cuò)誤等狀態(tài)類型，可以自動(dòng)消失或手動(dòng)關(guān)閉。消息提示組件可以通過以下代碼進(jìn)行使用，當(dāng)單擊“顯示提示消息”按鈕的，即可彈出一個(gè)提示消息“操作成功！”。5.反饋組件二、ElementPlus組件通過靈活組合這些組件，開發(fā)者能以極簡代碼實(shí)現(xiàn)符合用戶認(rèn)知的交互反饋，確保信息傳達(dá)高效且不打斷主流程。在ElementPlus中文官網(wǎng)中，有許多現(xiàn)成的樣式和功能組件可供使用。前面演示的幾個(gè)例子只是冰山一角。在實(shí)際開發(fā)中，各種組件都會(huì)頻繁使用。在接下來的章節(jié)中，我們也將不斷應(yīng)用該框架中的各種組件。為了更好地掌握ElementPlus，建議大家養(yǎng)成經(jīng)常查閱官方文檔的習(xí)慣，充分利用文檔中的示例和說明，提升開發(fā)效率并拓展組件的使用技巧。ElementPlus的合理運(yùn)用三、ElementPlus布局

在現(xiàn)代Web開發(fā)中，前端UI框架通常會(huì)提供頁面布局解決方案。合理的布局不僅能夠使頁面結(jié)構(gòu)清晰和美觀，還能適配不同設(shè)備和屏幕尺寸。ElementPlus提供了強(qiáng)大的柵格系統(tǒng)，其中網(wǎng)格布局和響應(yīng)式設(shè)計(jì)是其核心特性。柵格系統(tǒng)是一種常用的網(wǎng)頁布局技術(shù)，通過將頁面水平分割成等寬的列，頁面元素能夠方便地排列其中。ElementPlus的柵格系統(tǒng)基于Flexbox實(shí)現(xiàn)，能夠快速生成響應(yīng)式布局，輕松適應(yīng)各種屏幕尺寸，幫助開發(fā)者快速高效地構(gòu)建復(fù)雜的頁面布局。三、ElementPlus布局

網(wǎng)格布局是一種常用的網(wǎng)頁布局技術(shù)，通過將頁面水平分割成等寬的列，頁面元素能夠方便地排列其中。ElementPlus框架主要采用柵格系統(tǒng)來實(shí)現(xiàn)頁面的網(wǎng)格布局。柵格系統(tǒng)采用24列布局方式，即每行最多可包含24個(gè)柵格單元。在使用ElementPlus的柵格系統(tǒng)時(shí)，布局的基本結(jié)構(gòu)由行和列組成：<el-row>：定義柵格布局的行。<el-col>：定義行中具體的列數(shù)。每一行由row組件包裹，而每個(gè)列則由col組件組成。在row組件中可以包含多個(gè)col組件，每個(gè)col組件可以設(shè)置不同的寬度，以實(shí)現(xiàn)靈活的自適應(yīng)布局。通過設(shè)置col組件的span屬性，指定每個(gè)柵格所占的列數(shù)。例如，:span="12"表示該列占據(jù)12個(gè)柵格單元，正好是半行的寬度。由于每一行默認(rèn)包含24個(gè)柵格單元，所有列的span總和不應(yīng)超過24。網(wǎng)格布局三、ElementPlus布局

網(wǎng)格布局用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，網(wǎng)頁內(nèi)容就可以放入這些創(chuàng)建好的布局中。網(wǎng)格布局三、ElementPlus布局

我們可以通過row和col組件來定義頁面的柵格布局。假設(shè)我們希望將頁面分成兩列，左側(cè)占16列，右側(cè)占8列，可以這樣定義：（1）基礎(chǔ)布局三、ElementPlus布局

默認(rèn)情況下，柵格之間是緊貼在一起的。你可以通過row組件的gutter屬性來設(shè)置列與列之間的間隔。例如，設(shè)置:gutter="20"為每列增加20px

的間隔：（2）分欄間隔三、ElementPlus布局

如果你需要某些列的內(nèi)容不靠左對齊，而是向右偏移，可以通過col組件的offset屬性實(shí)現(xiàn)。offset的值指定列在左側(cè)需要偏移的列數(shù)。例如，假設(shè)我們希望左側(cè)列占用4列并偏移4列，右側(cè)列占用8列，可以這樣實(shí)現(xiàn)：（3）列偏移三、ElementPlus布局

row組件默認(rèn)使用flex布局對分欄進(jìn)行靈活的對齊。通過設(shè)置row組件的以下屬性來控制flex布局的表現(xiàn)：type="flex"：啟用flex布局。justify：設(shè)置主軸方向上的對齊方式，支持start（默認(rèn)）、center、end、space-around、space-between或space-evenly。align：設(shè)置交叉軸上的對齊方式，支持top（默認(rèn)）、middle和bottom。例如，下面的代碼將兩個(gè)列元素居中對齊，并在主軸上均勻分布：（4）Flex布局支持三、ElementPlus布局

ElementPlus的柵格系統(tǒng)參照了Bootstrap的響應(yīng)式設(shè)計(jì)，支持頁面的響應(yīng)式布局，可以根據(jù)窗口的寬度自動(dòng)調(diào)整列的顯示方式。通過設(shè)置列的xs、sm、md、lg、xl等屬性，可以定義不同屏幕尺寸下的列寬和間距，實(shí)現(xiàn)靈活的響應(yīng)式設(shè)計(jì)：響應(yīng)式布局屬性屏幕尺寸xs<768px的超小屏幕sm≥768px的小屏幕md≥992px的中等屏幕lg≥1200px的大屏幕xl≥1920px的超大屏幕三、ElementPlus布局

我們可以為每個(gè)屏幕尺寸設(shè)置不同的列寬，從而實(shí)現(xiàn)響應(yīng)式布局。例如，我們希望在超小屏幕上每個(gè)列占據(jù)24列，在小屏幕和中屏幕上每個(gè)列占據(jù)12列，而在大屏幕和超大屏幕上每

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論