一、安裝庫
pnpm add element-plus --save
pnpm add @element-plus/icons-vue
二、安裝 Nuxt Element Plus 模塊
pnpm add @element-plus/nuxt -D
三、配置
在 nuxt.config.ts 中配置
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
typescript: {
shim: false,
},
modules: ['@element-plus/nuxt'],
css: ['element-plus/dist/index.css'],
})
四、在 .vue 文件中使用
類似寫 vue3 項目，可以導(dǎo)入組件，也可以直接使用組件
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>
<template>
<div class="common-layout">
<el-container>
<el-header>
<!-- <Header /> -->
<el-icon>
<Search />
</el-icon>
<el-button type="primary">Header</el-button>
</el-header>
<el-main>
<router-view />
</el-main>
<el-footer>
<!-- <Footer /> -->
<el-button type="primary">Footer</el-button>
</el-footer>
</el-container>
</div>
</template>
文章來源：http://www.zghlxwxcb.cn/news/detail-745215.html
參考博客
在 Nuxt 3 中集成 Element Plus 的步驟
20分鐘帶你入門Nuxt3文章來源地址http://www.zghlxwxcb.cn/news/detail-745215.html
到了這里，關(guān)于【Nuxt】在 Nuxt3 中使用 Element Plus的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
