Vue CLI的UI界面(可视化操作Vue项目)

一、打开我们的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界面,如下图:

Vue CLI的UI界面(可视化操作Vue项目)_第1张图片

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

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

四、导入Vue项目

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

Vue CLI的UI界面(可视化操作Vue项目)_第2张图片

Vue CLI的UI界面(可视化操作Vue项目)_第3张图片

 

你可能感兴趣的:(Vue.js,笔记,vue.js,前端,vue-cli3)