Vue CLI的UI界面（可视化操作Vue项目）

爱被打了一巴掌 2022-12-25 13:53 603阅读 0赞

## 一、打开我们的Vue项目 ##

如果当时是使用vue init webpack my-project创建Vue项目的，打开Vue项目是先用cd切换到项目文件夹，再使用“npm run dev”或者“npm run start”命令打开。如果是使用vue create my-project创建的Vue项目，就只能使用“npm run serve”命令打开项目。这是我目前的发现。

## 二、打开Vue-Cli的UI界面 ##

在已经打开了git bash的情况下，再双击git bash便可打开第二个git bash，然后切换到项目文件夹（如cd /F/my-project），然后运行“vue ui”命令便可自动打开Vue CLI的UI界面，并自动跳转到浏览器显示UI界面，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

## 三、通过Vue-Cli的UI界面可以创建Vue项目 ##

点击中间的“创建”，点击下方的“在此创建新项目”，其功能和使用命令行“vue create my-project”创建Vue项目是等同的

## 四、导入Vue项目 ##

因为我之前是使用命令行创建的Vue项目，因此我现在需要导入它，路径是我们Vue项目的路径，检查没错点击“导入这个文件夹”即可，导入成功应该是下面第二张图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221120/1b480aa7c34541dbabe965c37e95ed16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/d3274b888071498fb7aa8f87bbd3d3cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201202110802964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70