VUE3.0学习系列随笔（四）：VUE-UI管理界面使用之依赖和插件管理

女爷i 2023-01-10 14:50 183阅读 0赞

### VUE3.0学习系列随笔（四）：VUE-UI管理界面使用之依赖和插件管理 ###

VUE3.0 UI管理界面的运行项目见博客：[https://blog.csdn.net/qq\_26666947/article/details/112986393][https_blog.csdn.net_qq_26666947_article_details_112986393]  
本节是主要介绍VUE3.0 ui界面安装依赖和插件的使用方法。

#### 1、依赖管理主界面 ####

VUE3.0-UI的依赖界面主要包括展示包依赖，安装和卸载包依赖。包依赖包含用户自定义安装的包和项目默认包。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
以element-ui为例，展示VUE3.0-UI安装包依赖的全过程  
（1）进入安装依赖界面，搜索想要安装的包依赖  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]  
（2）点击右下角的安装包依赖，安装完成会弹窗通知  
![在这里插入图片描述][20210125114206328.png]  
（3）在依赖的主界面会显示安装成的包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]

##### 备注：这里安装的element-ui的版本2.15.0，经过实测，这个版本的elementui并不适用于vue3.0，本文只是展示如何通过UI管理界面安装依赖，因此需要酌情使用，element-ui的安装版本在后续博客单独指出。 #####

#### 2、插件管理主界面 ####

VUE3.0-UI的插件管理界面主要包括展示已安装插件，更新插件和安装新插件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]  
以vue-router为例，展示VUE3.0-UI安装插件的全过程  
（1）进入安装插件界面，搜索想要安装的插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]

##### 注意：有的插件会带有生成器，可以在项目中修改或者新增文件，会更改目录 #####

（2）选中目标插件，点击安装插件，会有弹窗通知安装成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]  
（3）部分插件会显示进行配置，比如router会显示配置路由模式，这里一般选择打开，然后点击完成安装。开始生成部分文件和文件夹，并更改配置。

##### 注意：这个位置也可能存在生成失败的情况 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 6]  
（4）安装和配置完成后，会在插件主界面显示安装成功的插件。  
![在这里插入图片描述][20210125125653251.png]

[https_blog.csdn.net_qq_26666947_article_details_112986393]: https://blog.csdn.net/qq_26666947/article/details/112986393
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/c310efa265134045a42c8c08435c7174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210125114109187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[20210125114206328.png]: https://img-blog.csdnimg.cn/20210125114206328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210125114248928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210125114908725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210125124846355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210125125036846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210125125209586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[20210125125653251.png]: https://img-blog.csdnimg.cn/20210125125653251.png