目录
简介
因为最近一个项目需要使用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项目的方式以及添加插件和依赖项目的方式,同时演示了项目启动的效果。如果你有兴趣,我觉得可以持续关注。个人觉得这个对于主攻后端而前端也能写点的同学还是有点帮助的,至少不需要记太多前端的创建、启动等命令。