vue UI 基于图形化界面快速创建vue项目

标签: vue  vue  前端

Vue CLI 3新版本发布后,我们现在快速创建一个vue项目的话,更加简单了,Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。

今天,我会跟你一一介绍Vue UI的beta版本中可用的功能。

1 首先我们可以先检查下自己的vueCli版本是否在3.0以上,如果没有的话我们可以升级或者重新安装都可以,全局安装,只安装一次就行,检查版本的形式如下:

2  安装的方式如下,可以根据自己的需要 选择以下的任何一种方式都可以

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3 接着我们就可以在我们的终端中创建vue项目了

在打开的终端中输入vue ui

命令执行完之后,会自动给我们打开一个界面,如下:

在打开的这个面板中,我们可以设置项目的存放位置,默认的存放位置是我们的c盘,可以自己选择,选择完之后,点击在此创建项目的按钮,进入到下面这个页面:

在这个页面,我们只需要填写下面这两项就行,其余的按照默认的就可以了

 

接着打开的是下面的这个页面

这个界面中,如果我们之前已经生成保存的有一个预设,比如我的这个my-preset01这个预设,我们可以直接选择,因为这个预设已经把我们之前需要安装的依赖等配置好,可以直接使用,当然我们也可以选择默认配置或者手动配置项目。

比如我们选择的是手动配置, 点击下一步:界面如下

在功能这个面板中,我们可以根据自己的需要安装一些插件,如果需要安装某个插件,只需要将该插件后面的那个开关打开就行

选完之后,点击下一步,界面如下:

配置这个界面,我们可以选择项目中路由的形式,建议使用hash模式比较好些,下面的这个配置是让我们选在什么时候进行代码格式检查,选默认的即可,即保存的时候,右边的这个下拉框,我们选择标准的模板就可以了。选择完之后,我们点击创建项目

来到的是这个界面

我们可以将我们本次的配置保存成一个新的预设,等下次我们创建项目的时候可以直接使用,也可以不保存,直接创建项目

接下来我们等待下就可以了,因为这个会自动帮我们下载我们选择或者配置的那些插件或者依赖

下载完成后,浏览器会自动帮我们打开一个项目控制面板,在这我们可以根据需要自定义配置就行

选择左侧的任务选项,然后打开任务面板,点击serve会出现右侧对应的区域,接着点击运行,我们的vue项目就启动了

编译成功之后,点击启动app按钮,就能看到项目的页面了

以上就是利用图形化界面创建vue项目的方式,我们在创建好的项目中,可以根据项目需求安装各种依赖或者插件即可。

版权声明:本文为weixin_40967353原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40967353/article/details/107927601