Nuxt3_element-plus 最佳实践

简述

element-plus是日常开发中经常使用到的ui组件库，nuxt对于此框架也有封装了自己的模块，轻松引用即可。

使用nuxt官网模块（推荐）

安装

npm i element-plus @element-plus/nuxt -D

配置项

eport default defineNuxtConfig({
  modules: [
    // 引入 element-plus 模块
    '@element-plus/nuxt'
  ],
  // element 配置
  elementPlus: {/** */}
})

用法

基础组件

组件用法跟vue.js中用法一致，如下案例：

<el-button 
  type="primary"
>
  Hello Nuxt
</el-button>

icon使用

使用时发现element-plus用普通组件语法，图标是不生效的，在使用的图标前需要ElIcon + 图标名称，如下：

// ElIcon + EditPen  注 EditPen：图标名称
<el-button
 :icon="ElIconEditPen"
 type="success"
>
  Hello Nuxt
</el-button>
​
or 
​
<el-icon :size="20" color="red">
  <ElIconEdit />
</el-icon>

参考地址

https://nuxt.com.cn/modules/element-plus

使用插件模式

安装

npm i element-plus @element-plus/icons-vue

配置

在plugins目录下新建element-plus.client.ts文件

import ElementPlus from 'element-plus'
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ElementPlus)
  nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
    prefix: Math.floor(Math.random() * 10000),
    current: 0,
  })
})

nuxt.config.ts配置css

export default defineNuxtConfig({
  css:[
    'element-plus/dist/index.css',
  ]
})

element-plus图标

// 按需引入
import {
  Edit,
  Location // 图标属性要大写
} from '@element-plus/icons-vue'