快捷導(dǎo)航

Vue 3項目如何安裝Element-Plus

更新時間：2024年07月19日 10:40:34 作者：洛*璃

Element Plus 是一個基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開發(fā)體驗,并為開發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細介紹如何在 Vue 3 項目中安裝 Element Plus,感興趣的朋友一起看看吧

Element Plus 是一個基于 Vue 3 的現(xiàn)代前端UI框架，它旨在提升開發(fā)體驗，并為開發(fā)者提供高效、優(yōu)雅的組件。如果你正在使用 Vue 3 進行項目開發(fā)，那么安裝和集成 Element Plus 是一個不錯的選擇。在本文中，博主將詳細介紹如何在 Vue 3 項目中安裝 Element Plus。

1.創(chuàng)建一個Vue3項目

在本文中，博主已經(jīng)創(chuàng)建好了一個Vue 3的項目，如果不知道如何創(chuàng)建Vue 3項目的小伙伴們，可以參考Vite 創(chuàng)建 Vue3 + TS 項目

2.安裝依賴

定位到項目根路徑下(與src目錄同級)，運行命令行：

# 安裝 Element-Plus 組件庫
# 使用 npm 包管理器
$ npm install element-plus --save
# 使用 yarn 包管理器
$ yarn add element-plus
# 使用 pnpm 包管理器
$ pnpm install element-plus

3.全局引入樣式

Element Plus 提供了豐富的 CSS 樣式，你需要將其引入你的項目中。通常，你可以使用以下 CLI 命令將樣式集直接引入你項目的 main.js (或 main.ts)文件中：

# 引入 CSS 樣式
$ npm run el-get-style

其實，博主更推薦手動為 Vue3 項目引入 CSS 樣式：

/* main.js 或 main.ts文件中 */
import 'element-plus/dist/index.css'  // 引入全局 CSS 樣式

4.全局組件注冊

Element Plus 中的組件使用時需要首先注冊。在項目入口文件 main.js (或 main.ts)中引入 Element Plus 組件庫：

/* main.js 或 main.ts 文件中 */
import { createApp } from 'vue'
引入 Element-Plus 依賴
import ElementPlus from 'element-plus'
// 引入全局 CSS 樣式
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
// 掛載 Element-Plus
app.use(ElementPlus)
app.mount('#app')

5.使用Element-Plus組件

現(xiàn)在，你可以在 Vue 組件中使用 Element-Plus 的 UI 組件了：

<!-- index.vue -->
<template>
    <div>
        <h1>This is a Home Page.</h1>
        <el-button type="primary">Click On</el-button>
    </div>
</template>
<script>
</script>
<style>
</style>

運行項目后，可以看到我們的<el-button></el-button>組件長這樣：

6.安裝圖標

Element-Plus 跟 Element-UI 不同的是，在Element-Plus中，圖標組件不再像Element-UI那樣隨依賴一起引入，而是需要自己在用到的時候去引入它：

定位到項目根路徑下(與src目錄同級)，運行命令行：

# 使用 npm 包管理器
$ npm install @element-plus/icons-vue
# 使用 yarn 包管理器
$ yarn add @element-plus/icons-vue
# 使用 pnpm 包管理器
$ pnpm install @element-plus/icons-vue

你需要從 @element-plus/icons-vue 中導(dǎo)入所有圖標并進行全局注冊。

/* main.js 或 main.ts 文件中 */
import { createApp } from 'vue'
import '/@/style.css'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// 引入 ElementPlus 圖標庫
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from '/@/App.vue'
import pinia from '/@/store'
import router from '/@/router'
const app = createApp(App)
// 注冊 ElementPlus 圖標組件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(pinia)
// 掛載 路由器
app.use(router)
// 掛載 ElementPlus 組件庫
app.use(ElementPlus)
app.mount('#app')

7.將圖標應(yīng)用到組件上

<!-- index.vue -->
<template>
    <div>
        <h1>This is a Home Page.</h1>
        <el-button type="primary">
            <!-- 如果直接使用SVG圖標，則需要為它添加屬性 -->
            <!-- 因為SVG圖標默認不攜帶任何屬性 -->
            <Edit style="width: 1em; height: 1em; margin-right: 8px" /> Click On
        </el-button>
    </div>
</template>
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
</script>
<style scoped>
</style>

如果不出意外的話，最后的效果應(yīng)該是這樣的：

注意事項：