【Nuxt】在 Nuxt3 中使用 Element Plus

安装 Element Plus 和图标库

shell 复制代码
pnpm add element-plus --save
pnpm add @element-plus/icons-vue

安装 Nuxt Element Plus 模块

shell 复制代码
pnpm add @element-plus/nuxt -D

配置 Nuxt 项目

nuxt.config.ts 中配置

shell 复制代码
// 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 项目,可以导入组件,也可以直接使用组件

html 复制代码
<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>

参考博客

在 Nuxt 3 中集成 Element Plus 的步骤
20分钟带你入门Nuxt3

相关推荐
DN金猿7 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子8 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6620 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_32 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app