简介

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

使用UI创建vue项目并添加element ui和axios相关推荐

使用vue ui创建vue项目(基于图形化界面的方式)
前提: 1.打开cmd ,安装vue脚手架 npm install -g @vue/cli 2.若之前安装过无需重新安装:直接在cmd 中输入vue ui 若输入vue ui 后无反应,则是安装的脚手 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
ui vue 创建项目教程并关闭语法_创建vue项目流程
创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目. (1)安装确认已安装了node.js ...
ui vue 创建项目教程并关闭语法_使用vue ui命令创建vue项目步骤
1.前置环境 1.node.js 2.vue-cli 3.webstorm 2.创建步骤 1.在webstorm中打开一个终端,输入 #vue ui 运行结束后,会启动一个web服务用以可视化创建vu ...
vue ui工具来创建vue项目（IDEA）
使用vue ui工具来创建vue项目(IDEA) 1.下载node.js 首先我们上node.js官网, 下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境 2.检查是否 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
前端-可视化创建vue项目
注:以下操作是在已安装脚手架的基础上进行(如果出现可视化创建vue项目失败的情况,可能是脚手架版本的问题,建议安装更高版本的脚手架) 一.打开可视化界面第一步,视窗键+R,打开"运行&qu ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

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

简介

Vue简单安装说明

项目创建步骤

总结

使用UI创建vue项目并添加element ui和axios相关推荐

最新文章

热门文章