目录

简介

Vue简单安装说明

项目创建步骤

总结

简介

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

Vue简单安装说明

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

安装好后&＃xff0c;先检查下安装情况&＃xff0c;如下

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

项目创建步骤

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

稍等一下&＃xff0c;可以打开以下web界面。&＃xff08;每个人的等待时间是不一样的~~&＃xff09;

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

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

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

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

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

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

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

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

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

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

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

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

运行效果如下&＃xff1a;

总结

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