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

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

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

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

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

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

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

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

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

问题代码如下:

效果如下:

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

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

结果就正常了

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

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