02:如何用 vue-cli 图形界面搭建 Vue3 环境

在之前文章我们已经用命令行或者说终端配合Vue-cli构建 Vue3 的项目了,本文带大家看一下Vue-cli如何用图形界面构建项目。因为是图形界面,所以代码很少,多是界面。

启动 Vue-cli 中的图形界面

当你安装了最新版的Vue-cli就可以使用 vue ui这个命令,开启一个 UI 界面,然后会出现下面的提示。

vue ui
Starting GUI...
Ready on http://localhost:8000

出现提示后,http://localhost:8000地址会直接跳转到浏览器地址栏中,就会出现下面的界面。

vue 项目管理器

这时候点击创建按钮,然后选择页面下方的在此处创建新项目。这时候会让你输入项目名称和包管理器,其他默认即可。我在这里输入了vue3-2,并使用了npm作为管理器。

此处创建项目

输入项目名称和包管理器

可以点击下一步了,之后会让你选择预设模板,这里选择手动。

选择预设模板

 

之后就和命令行基本一样了,根据自己的项目来进行配置(下面是我们在命令行的配置)。

项目配置 项目配置

点击下一步

项目配置

这步完成后,可以选择“创建项目”,然后弹出提示,问是不是保存这个配置,我们是教程练习,所以这里依然是不保存,当然如果大家是在公司做项目,可以保存预设,方便使用。

是否保存预设

这时候如果你注意VSCode中的终端,会发现它开始为我们构建项目。大概一分钟左右,会跳出下面的页面,说明项目已经构建完成。

项目创建完成

这时候再回到 VSCode 的终端中,进入项目cd vue3-2,然后启动服务npm serve,等到服务启动后在浏览器地址栏输入http://localhost:8080/,就可以看到下面的界面了。

vue-cli 搭建 Vue3 开发环境

看到这个界面,证明你的 Vue3+TypeScript 项目已经创建好了,接下来我们就可以为所欲为写代码了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 02:如何用 vue-cli 图形界面搭建 Vue3 环境

发表回复