一、安装库
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 项目，可以导入组件，也可以直接使用组件
<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>
文章来源：https://www.toymoban.com/news/detail-745215.html
参考博客
在 Nuxt 3 中集成 Element Plus 的步骤
20分钟带你入门Nuxt3文章来源地址https://www.toymoban.com/news/detail-745215.html
到了这里，关于【Nuxt】在 Nuxt3 中使用 Element Plus的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
