@Vue/Cli 3.0 可视化项目管理

@vue/cli 3.0中引入了一个图形化界面工具来去管理项目。运行方法也很简单,确保你的@vue/cli是3.0以上的版本并且全局安装,之后在cmd下执行vue ui命令即可运行。

一、安装使用

1.使用前需要先全局安装vue-cli:

npm i -g @vue/cli

2.使用如下命令,图形管理界面就会在浏览器打开:

vue ui

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191121154722312.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw==,size_16,color_FFFFFF,t_70)

二、创建项目

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191121155255637.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw,size_16,color_FFFFFF,t_70)
管理器可以选择npm、yarn、pnpm
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191121155517744.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw
,size_16,color_FFFFFF,t_70)
点击下一步后会进入预设界面,和在命令行使用vue create创建项目是一样效果的,只是这里都用鼠标点(─.─||)。这里就不赘述配置过程了,可以直接选择默认或者是手动按需加载。
在这里插入图片描述
创建好项目之后,就可以进入到后台管理页面
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191121150909530.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw,size_16,color_FFFFFF,t_70)
接下来就是运行项目了:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191121175358196.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw
,size_16,color_FFFFFF,t_70)

三、依赖管理

项目所需要的依赖包可以直接搜索下载:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191122102428881.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191122102559402.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ2Mw
,size_16,color_FFFFFF,t_70)
插件管理也是同样操作。


总结:

本文简单的介绍了一下如何使用vue项目可视化工具来去创建项目和下载依赖包,当然了,这只是其中一部分。在任务选项里面还有调试和检测功能,有兴趣可以实际运行一下。
个人使用来看这个工具的体验还是不错的,在项目管理上也更直观,直接用一个后台系统来去管理vue项目还是挺酷炫的。当然对于习惯了命令行工具的人来说,这个功能就有点鸡肋了。

posted on 2019-12-12 15:14  秋闻道  阅读(3540)  评论(2)    收藏  举报