快捷導(dǎo)航

Vue 3項(xiàng)目如何安裝Element-Plus

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

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

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

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

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

2.安裝依賴

定位到項(xiàng)目根路徑下(與src目錄同級(jí))，運(yùn)行命令行：

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

3.全局引入樣式

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

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

其實(shí)，博主更推薦手動(dòng)為 Vue3 項(xiàng)目引入 CSS 樣式：

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

4.全局組件注冊(cè)

Element Plus 中的組件使用時(shí)需要首先注冊(cè)。在項(xiàng)目入口文件 main.js (或 main.ts)中引入 Element Plus 組件庫(kù)：

/* 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>

運(yùn)行項(xiàng)目后，可以看到我們的<el-button></el-button>組件長(zhǎng)這樣：

6.安裝圖標(biāo)

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

定位到項(xiàng)目根路徑下(與src目錄同級(jí))，運(yùn)行命令行：

# 使用 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)入所有圖標(biāo)并進(jìn)行全局注冊(cè)。

/* main.js 或 main.ts 文件中 */
import { createApp } from 'vue'
import '/@/style.css'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// 引入 ElementPlus 圖標(biāo)庫(kù)
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)
// 注冊(cè) ElementPlus 圖標(biāo)組件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(pinia)
// 掛載 路由器
app.use(router)
// 掛載 ElementPlus 組件庫(kù)
app.use(ElementPlus)
app.mount('#app')

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

<!-- index.vue -->
<template>
    <div>
        <h1>This is a Home Page.</h1>
        <el-button type="primary">
            <!-- 如果直接使用SVG圖標(biāo)，則需要為它添加屬性 -->
            <!-- 因?yàn)镾VG圖標(biāo)默認(rèn)不攜帶任何屬性 -->
            <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)該是這樣的：

注意事項(xiàng)：