使用UI创建vue项目并添加element ui和axios

目录

简介

Vue简单安装说明

项目创建步骤

总结

---

简介

因为最近一个项目需要使用SPA的方式，而前端选择使用vue来实现。所以最近重新看了下vue的相关知识，发现最新的vue项目可以在web中使用界面完成，而不需要一个一个命令的手动敲了。本文就是对UI创建vue项目的简单探索。

 

Vue简单安装说明

首先你需要在你的计算机上安装nodejs，其附带安装了npm（网上nodejs按照文档很多，不会的自行度娘了解）。然后就可以使用npm安装vue了，当然你也可以安装yarn并使用它来安装和管理vue。具体可参考官网给定的说明：https://cn.vuejs.org/v2/guide/installation.html。

安装好后，先检查下安装情况，如下

可以看到，我所安装的vue-cli版本是4.X以上的了。这里说明的是，必须安装vue-cli的版本在3.X及以上时才可以使用UI创建vue项目。如果是2.X及以下的，只能在命令行手动写命令一步步的创建vue项目。

 

项目创建步骤

第一步，在powershell和cmd命令行工具中输入“vue ui”并回车。

稍等一下，可以打开以下web界面。（每个人的等待时间是不一样的~~）

可以看到当前是没有项目的，点击【创建】标签，可以看到以下界面。可以手动编辑目录，或者指定目录符号，如C：；然后在下面选择（图中没有显示，是因为现在Vue文件夹下没有任何内容，所以下面显示空白一片）具体的文件夹，也可以通过最右侧按钮新建文件夹。

第二步，点击下面的【在此创建新项目】按钮创建项目。这里要注意的是，项目名称一定要是英文字母。包管理器默认即可，当然也可以下拉选择具体的管理器名称。可以看到默认建议我们初始化一个git地址，如果你后期在上传或者不用git管理代码，这里需要取消选中状态。

第三步，通过点击【下一步】按钮进入预设标签内。这里由于是第一次创建，所以选中手动配置项目。如果你曾经创建过项目，在这里是有显示的，可以选中之前的项目作为模板。

第四步，通过点击【下一步】按钮进入功能标签内。可以看到像Babel这也的打开状态，要是项目中会安装；而TypeScript这样的关闭状态，表示项目中不会安装。大家可通点击【查看详情】来查看具体功能的详细说明信息（一般是官网中的信息）。这里我选中了Babel（默认是选中的）、Router、Lint/Formator（默认是选中的）和使用配置文件（建议选中）。

第五步，通过点击【下一步】按钮进入配置标签内。第一个历史模式默认是关闭的，即url中会有符号‘#’；如果此选项打开了，则url中不会显示符号‘#’。第二个我选中了下拉内容中 第三个：ESlint+Standard config，其他默认并单击【创建项目】按钮。

如下图，会有一个弹框。我们可以在此处输入【预设名】，这也就可以在下次创建项目时，在预设中选择了。如果不想设置预设，可以点击【创建项目，不保存预设】按钮完成项目的创建工作。这可能需要等待一段时间。

如果出现了如下所示的界面，表示项目已经创建完毕。您可以点击最左侧下面几个图标看看显示的内容。

我们可以在vs code中看看创建的项目。

第六步，安装element ui插件，如下图，点击右上角的【添加插件】按钮并输入“vue-cli-plugin-element”，然后选择第一个，点击右下角的安装按钮即可。（会出现等待界面）

等待一段时间后会出现以下界面。这里第一个我们选择“Import on demand”，即按需导入，而不默认的全部导入，语言默认就好。然后点击【完成安装】按钮，等待安装的完成。（会出现等待界面）

第七步，安装axios运行依赖。如下图所示（点击左侧第三图标），点击右上角的【安装依赖】按钮，并输入需要的依赖名称（注意，这里是在运行依赖标签页）。选择第一个，然后滚动到下面，在右下角找到按钮点击即可。（会出现等待界面）

第八步，测试运行。如下图所示，点击左侧最下面一个图标，在Serve标签中点击运行，等待一会后出现如图所示的界面，表示编译成功了。在中间仪表盘中，点击【启动app】按钮查看项目运行效果。

运行效果如下：

 

总结

本文简单介绍了使用界面来创建一个vue项目的方式以及添加插件和依赖项目的方式，同时演示了项目启动的效果。如果你有兴趣，我觉得可以持续关注。个人觉得这个对于主攻后端而前端也能写点的同学还是有点帮助的，至少不需要记太多前端的创建、启动等命令。