安装 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>