1、安装依赖
npm install element-plus
npm install @element-plus/icons-vue
2、配置
1、在plugins目录下新建
element-plus.client.ts,如果没有plugins目录,先在根目录下新建plugins目录
2、element-plus.client.ts 文件里注册组件
import * as ElementPlus from 'element-plus/dist/index.full'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ElementPlus, {
locale: zhCn,
})
})
3、在nuxt.config.ts中配置element-plus
全局的css文件
export default defineNuxtConfig({
css:[
'element-plus/dist/index.css',
],
})
以上就完成了在Nuxt3中element plus 的安全和配置。
3、注意
以下是在Nuxt3 中使用element plus的一些注意点
1、使用 element plus 的图标需要单独引入,例如
import { Lock, User, Key } from '@element-plus/icons-vue'
2、Hydration completed but contains mismatches报错,Failed to resolve component警告,页面中使用element plus 组件需要在组件外包一层<client-only>,例如:
<template>
<div>
<client-only>
<el-button @click="getMore">调用</el-button>
</client-only>
</div>
</template>