Vue3集成Element-plus快速搭建頁面框架的過程
Element Plus簡介
Element Plus 是一款基于 Vue 3 的桌面端 UI 組件庫，旨在為開發(fā)者、設計師和產品經理提供豐富、易用的組件，幫助快速構建現(xiàn)代化的用戶界面。
主要特性：
- 豐富的組件體系：Element Plus 提供了大量的 UI 組件，包括按鈕、表格、表單、對話框、菜單等，滿足各種開發(fā)需求。
- 響應式設計：組件采用響應式布局，確保在不同設備和屏幕尺寸下均能良好展示。
- 易于使用：提供清晰的 API 和詳細的文檔，降低開發(fā)者的學習成本。
- 主題定制：支持主題定制，開發(fā)者可以根據項目需求調整樣式。
網站：https://element-plus.org/zh-CN/
Vue3集成Element Plus
IDEA打開已經搭建好的Vue3項目
Vue3框架的搭建在這篇文章：
在IDEA打開控制臺（Terminal)，一定要先在控制臺下cd切換到Vue目錄下面
然后執(zhí)行下面的命令安裝element-plus
安裝依賴
npm i element-plus -S
如果想卸載element-plus，就執(zhí)行下面這段命令
npm uninstall element-plus
當element-plus安裝完成后，可以在package.json可以看到依賴的相關信息
依賴放在node_modules包下的element-plus包里面。
當卸載后，依賴會消失。
main.js引入
在element-plus的快速開始頁面：快速開始 | Element Plus有寫如何在main.js引入依賴。
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
安裝好了之后，可以使用element-plus集成的組件
按鈕組件
選擇提供的Button組件，復制到Home.vue中,啟動項目，就可以看到相應的組件樣式。
<template>
<div>
主頁
</div>
<div class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
</template>
<script setup>
</script>
icon圖標
想要使用icon圖標的組件，需要安裝依賴，注冊所有圖標。
npm install @element-plus/icons-vue
然后在main.js中添加這段代碼
// main.ts
// 如果您正在使用CDN引入，請刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App) //如果這行在main.js中就有，就不需要重復寫了
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}element-plus官網提供了很多常見的icon圖標，直接點擊想要的icon圖標，就可以復制它的組件代碼，然后粘貼到項目中
這里我復制的是icon code
<div style="padding: 50px"> <el-icon size="20px" color="red"><View /></el-icon> //這個就是從官網復制的icon code </div>
根據官網提供的API,開發(fā)者可以對組件的大小size和顏色color進行修改
當在按鈕或輸入框組件里面使用圖標,需要單獨導入圖標
像這個帶日歷圖標的搜索框，復制代碼后還要單獨導入圖標，否則就只有輸入框，而沒有日歷圖標（沒有明顯的報錯提示）
如何將圖標導入，并且在輸入框中顯示：鼠標放到"Calendar"（suffix-icon的屬性上），快捷鍵alt+enter就會出現(xiàn)導入的選擇，選擇其中一個即可。
suffix-icon（后綴icon)是圖標在框的末尾顯示，而prefix-icon(前綴icon)是圖標在框的開頭顯示。
導入成功后，script中出現(xiàn)import的代碼
打開瀏覽器，"Calendar"的icon成功顯示。
Element Plus主題色設置
改變主題色可以在這里面的background-color進行修改，但是每次都這樣比較麻煩，可以使用一種全局修改的方法。
安裝sass,unplugin-vue-components,unplugin-auto-import
npm install -D sass unplugin-vue-components unplugin-auto-import
配置index.scss文件放在src/assets/css下
@forward "element-plus/theme-chalk/src/common/var.scss" with(
$colors:(
"primary":("base":#2c82ff),
"success":("base":#31bf00),
"warning":("base":#ffad00),
"danger":("base":#e52f2f),
"info":("base":#8055ff),
)
);配置vite.config.js
import Components from 'unplugin-vue-components/vite'//自動導入vue中的組件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//對應組件庫的導入
import AutoImport from 'unplugin-auto-import/vite'//自動導入ui-組件，比如element-plus
plugins: [
vue(),
//element-plus按需導入
AutoImport({resolvers: [ElementPlusResolver()]}),
//配置element-plus采用sass樣式配置系統(tǒng)
Components({resolvers: [ElementPlusResolver({importStyle: 'sass'})]}),
],
css:{
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/css/index.scss" as *;`,
},
}
},AutoImport: 這個插件用于自動導入 Vue 組件和其他常用的 API。通過使用 ElementPlusResolver()，它會自動導入 Element Plus 組件庫中的組件，而不需要手動在每個文件中導入。這可以減少代碼的冗余，提高開發(fā)效率。
**Components**: 這個插件用于按需加載 Vue 組件。通過配置ElementPlusResolver({importStyle: 'sass'})，它會在使用 Element Plus 組件時，自動引入相應的 Sass 樣式。這意味著你可以在項目中使用 Element Plus 組件，而不需要手動引入每個組件的樣式文件。
css: 這個部分配置了 CSS 預處理器的選項。
preprocessorOptions: 這里指定了 SCSS 的配置。
additionalData: 這個選項允許你在每個 SCSS 文件的開頭自動添加一些代碼。在這里，它會自動引入 element-plus.scss 文件，這樣你在項目中的所有 SCSS 文件中都可以使用這個文件中定義的樣式，而不需要在每個文件中手動引入。
父子組件
在src/views下新建一個文件Manager.vue,在里面寫入代碼
<template> <div> 這是父組件 <RouterView /> </div> </template> <script setup> </script>
修改src/router中index.js的代碼
//原先是：
// {path: '/', name: 'home', component: import('../views/Home.vue'),},
{ path: '/', component: import('../views/Manager.vue'),
children:[
{path: 'home', component: import('../views/Home.vue'),}
],
},這樣的話通過http://localhost:5173/可以訪問到Manager.vue中的內容
然后斜杠后面可以輸入子組件的路由，比如輸入http://localhost:5173/home，可以訪問到Manager.vue和Home.vue的內容
父子組件中父組件是不變的，但子組件根據不同的路由而改變
這里舉個例子：
Vue3制作管理系統(tǒng)頁面 配置頭部區(qū)域
將圖片放到src/assets/imgs的文件夾下，保存為logo.png
<template>
<div>
<!--頭部區(qū)域開始-->
<div style="height: 60px;border-bottom: 1px solid #eee; display: flex;align-items: center;">
<div style="display: flex;align-items: center;padding-left: 1px;">
<img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;">
<span style="font-size: 20px;font-weight: bold;color: #2c82ff;margin-left: 10px;">標題區(qū)域</span>
</div>
<div style="flex:1 "></div>
</div>
<!--頭部區(qū)域結束-->
</div>
</template>
<script setup>
</script>
配置導航欄菜單
在element-plus官網搜索Menu
滑到側欄這個位置，根據它提供的樣例和代碼為參考進行編寫
<template>
<div>
<!--頭部區(qū)域開始-->
<!-- border-bottom: 1px solid #eee;是給頭部加一個底部邊框線,如果區(qū)域有背景色，可以看出來，在有背景色的情況下，去掉后就感覺上下是連起來的-->
<div style="height: 60px; display: flex;">
<!-- width區(qū)域設置200px的寬度，和菜單寬度保持一致-->
<div style="width: 240px; display: flex;align-items: center;padding-left: 20px;background-color:#3a456b;border-color: #3a456b;;">
<img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;border-radius: 100%;">
<span style="font-size: 20px;font-weight: bold;color: #ecf0f2;margin-left: 10px;">后臺管理端</span>
</div>
<div style="flex:1;border-bottom: 1px solid #ddd; display:flex;align-items:center;">
<span style="padding-left: 20px">首頁/數(shù)據分析</span>
</div>
<div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;">
<el-dropdown >
<div style="display: flex;align-items: center; border-bottom: 1px solid #ddd;height: 60px;">
<img src="@/assets/imgs/admin.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
<span style="margin-left: 5px;">管理員</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>個人中心</el-dropdown-item>
<el-dropdown-item >退出登錄</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<!--頭部區(qū)域結束-->
<!--下方區(qū)域開始-->
<div style="display: flex;">
<!--左側菜單區(qū)域開始-->
<div style="width: 240px;box-shadow: 0 0 10px rgba(0,0,0,0.1);">
<!--default-active="1"是默認激活的菜單選項為1，如果是1-1-->
<!-- 我想讓右側的邊框線觸底，因此用calc()計算高度，讓那條線觸底-->
<!-- default-openeds="['1']"是默認展開的菜單-->
<el-menu default-active="/manager/home" style="min-height: calc(100vh - 60px);" :default-openeds="['1']">
<el-menu-item index="/manager/home">
<el-icon><House /></el-icon>
<span>首頁</span>
</el-menu-item>
<el-sub-menu index="1">
<template #title >
<el-icon><location /></el-icon>
<span>數(shù)據管理</span>
</template>
<!-- 二級菜單-->
<el-menu-item index="1-1">二級菜單</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
<!--左側菜單區(qū)域結束-->
<!--右側內容區(qū)域開始-->
<div style="margin-left:10px;background-color: #f2f2f4;flex: 1;width: 0;margin-top: 10px;padding: 10px;">
<RouterView />
</div>
<!--右側內容區(qū)域結束-->
</div>
</div>
<!--下方區(qū)域結束-->
</template>
<script setup>
</script>
<!-- <style scoped>和<style>兩種樣式，scoped是局部樣式，只對當前組件有效，而不加scoped是全局樣式，對所有組件都有效。-->
<style>
.el-menu{
background-color:#3a456b;
border:none;
}
.el-sub-menu__title{
background-color:#3a456b;
color: #ddd;
}
.el-menu-item{
height: 50px;
color: #ddd;
}
.el-menu-item.is-active{
background-color: #537bee;
color: #ddd;
}
.el-sub-menu__title:hover{
background-color: #7f98f8;
}
.el-menu-item:not(.is-active):hover{
background-color:#5dade2;
color: #333;
}
.el-dropdown{
/*鼠標移入時，會有一個小手的樣式*/
cursor: pointer;
}
.el-tooltip__trigger{
outline: none;
}
</style>添加查詢框及添加數(shù)據
在src/assets/css中的global.css添加:
.card{
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0,0,0,.12);
}然后修改Home.vue
<template>
<div>
<div class="card" style="margin-bottom:5px;">
<el-input v-model="data.name" placeholder="請輸入內容" style="width: 300px;margin-right: 5px;" prefix-icon="Search"></el-input>
<el-button type="primary">查詢</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-button type="primary">新 增</el-button>
<el-button type="danger">批量刪除</el-button>
<el-button type="success">批量導入</el-button>
<el-button type="info">批量導出</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名稱" width="180" />
<el-table-column prop="phone" label="電話" />
<el-table-column prop="address" label="地址" width="180" />
</el-table>
</div>
<div class="card">
<el-pagination
v-model:current-page="data.pageNum"
:page-size="data.pageSize"
layout="total, prev, pager, next"
:total="data.total"
/>
</div>
</div>
</template>
<script setup>
import {reactive} from 'vue'
const data = reactive({
name: null,
pageNum: 1,
pageSize: 5,
total: 6,
tableData: [
{ name: 'cpu', phone: '13877886677', address: '北京市朝陽區(qū)' },
{ name: 'cpunull', phone: '13988997788', address: '上海市徐匯區(qū)' },
{ name: '小張', phone: '138776554466', address: '安徽省合肥市' },
{ name: '小李', phone: '138799882566', address: '安徽省合肥市' },
{ name: '小王', phone: '13987622566', address: '安徽省合肥市' },
{ name: '小周', phone: '13487772266', address: '安徽省合肥市' },
]
})
</script>
到此這篇關于Vue3集成Element-plus快速搭建頁面框架的文章就介紹到這了,更多相關Vue3 Element-plus搭建頁面框架內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue微信公眾號網頁分享的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了60個vue常用工具類,包括vue郵箱驗證，vue瀏覽器識別，vue操作系統(tǒng)識別,vue html過濾，vue身份證校驗等需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法
KML 文件作為一種標準的地理數(shù)據格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復制內容功能,功能就是當我們點擊復制按鈕時，會提示“復制成功”，這樣復制的內容就可以在其他地方使用了，感興趣的朋友可以學習一下2023-04-04
微信小程序實戰(zhàn)基于vue2實現(xiàn)瀑布流的代碼實例
瀑布流，又稱瀑布流式布局，是比較流行的一種網站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據塊并附加至當前尾部，這篇文章主要介紹了微信小程序實戰(zhàn)，基于vue2實現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
在團體開發(fā)項目中,為了團隊所有成員書寫可維護的代碼,而不是一次性的代碼,讓團隊當中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關于Vue前端書寫規(guī)范的相關資料,需要的朋友可以參考下2023-01-01
使用Vue做雙向綁定的時候，可能經常會用到分頁功能，接下來通過本文給大家分享一個封裝分頁組件的方法，一起看看吧2016-12-12
Vue3中的?computed,watch,watchEffect的使用方法
這篇文章主要介紹了Vue3中的?computed,watch,watchEffect的使用方法，文章圍繞主題展開詳細的內容介紹，具有一定的參考價價值，需要得小伙伴可以參考一下2022-06-06
這篇文章主要介紹了詳解如何在Vue項目中發(fā)送jsonp請求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10