Nuxt3项目中集成element-plus UI库

Nuxt3项目中集成element-plus UI库

按上篇文章(Nuxt3项目搭建详细步骤)中创建初始化项目后就要引用ui库进行页面开发了。
花不少时间在尝试了网上文章中说的方式，都会出现各种编译时和运行时的问题,花了不少时间掉了不少头发，正在毫无头绪时，在官网无意间找到集成的方式https://nuxt.com/modules/element-plus

然后按上面的说明执行安装

npm i @element-plus/nuxt -D

然后在nuxt.config.ts中添加配置

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})

Options 中有哪些可用的选择可以在官网上查看。

添加element-plus模块后，开始在代码中使用。

(1)首先在项目根目录下的app.vue中添加如下代码。

<template>
  <div>
    <NuxtPage />
  div>
template>

(2)在根据目录创建pages文件夹, 然后在pages目录下创建index.vue,代码如下:

<template>
    <div>
        <el-button type="primary">测试el-button>
    div>
template>

执行yarn dev -o, 就可以在浏览器上看到效果了。
这样就集成成功了。

---

使用过程中碰到一个与这个库有关的问题,一直以为是这个库的问题，在github上查了好久也没有找到解决办法，后来发现原来是flex布局产生的问题。

问题代码如下:

<div
    style="width: 850px;  display: flex; flex-direction: row; align-items: center; height: 80px; margin-left: auto; margin-right: auto;">
    <div style="height: 100%;">
        <el-menu default-active="1" style="height: 100%;" mode="horizontal"
            active-text-color="#409EFF">
            <el-menu-item index="1">首页el-menu-item>
        el-menu>
    div>
div>

效果如下:

本来应该显示首页的菜单项的，结果变成了一个图标。

刚开始一直以为是element-plus库在nuxt3下的问题。然后一通百度，谷歌，github搜索，网上说的各种相关的不相关的方式都尝试了一遍，依然无果。为了不影响项目进度，暂时先button来代替了。但这个问题一直记在心里，直到几天后在使用flex布局碰到一个问题时，突然想到可能和上面问题相关。于是重新调整了代码如下:

<div
    style="width: 850px;  display: flex; flex-direction: row; align-items: center; height: 80px; margin-left: auto; margin-right: auto;"> 
    <div style="height: 100%; flex: 1;" >  
        <el-menu default-active="1"  style="height: 100%;" mode="horizontal"
            active-text-color="#409EFF">
            <el-menu-item index="1">首页el-menu-item>
        el-menu>
    div>
div>

结果就正常了

产生这个问题的原因可能是在flex布局中子元素el-menu的宽度在没指定的时候，默认是最小的，在最小的情况下el-menu-item不显示了，只显示内部自动添加的el-sub-menu。更具体的原因可能需要看element-plus的源代码了。由于精力有限，这里就不研究展开了。

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：Nuxt3项目中集成element-plus UI库