从0到1开发测试平台（三）利用vue cli创建前端vue项目

安装node

去node官网https://nodejs.org/zh-cn/下载node安装包进行安装

安装vue cli

使用win+R快捷键在弹出的窗口输入cmd命令，进入cmd命令窗口，输入以下命令

npm i -g @vue/cli

创建项目

在命令窗口输入下面的命令

vue ui

然后就可以输入命令窗口给出的地址，浏览器访问vue cli界面，如果之前创建过项目，就会进入下图所示页面

如果没有创建项目进入的是创建项目页面，如下图所示

如果已经创建了项目想进入创建项目页面，可以点击左下角home图标进入，进入到创建项目可以点上面路径那里进行编辑，选择你要创建项目的路径，这里我选择的是d盘workspace目录，选好创建目录后点击页面最下面的再次创建新项目按钮，进到下一个页面，如图

输入好项目名，git初始化信息(该项填入init project,没有可以把该选项关闭)，点下一步,进入到创建项目预设页面

你可以选择之前创建项目简历的模版，也可以选择手动创建，这里我们选择手动，然后点击创建项目,进入到功能选择页面，如图所示

这里我们要选择Babel,Router,使用配置文件(个人项目Linter/Formatter最好不要选，检查的过于严格有点烦)，点击下一步，进入配置页面，如图所示

我们选择默认关闭，点击创建项目，然后会弹框提示我们要不要保存预设，需要的话输入预设名点保存，然后下次创建在预设页面就可以选择我们保存的预设，这里我们点击不保存，然后就会开始转圈圈等待了，好了之后就会进入到项目的仪表盘页面

配置Element-UI组件库

在仪表盘页面点击插件，进入插件页面，如图所示

点击添加插件,进入到添加插件页面，输入vue-cli-plugin-element，我们选择第一个下载量多的，然后点击右下角安装按钮。

好了之后会提示安装成功，并跳到安装插件的配置插件页面

在这里我们不选默认的FULL import，而是选择按需导入(import on demand),点击完成安装。

配置axios

在仪表盘页面选中依赖，进入依赖页面，如图所示

点击安装依赖，进入安装依赖页面,如图所示

在运行依赖页面搜索axios,选择第一个，点击安装按钮，然后是等待，完成之后就安装ok,到此前端项目初始化构建完成，然后我们用webstorm打开构建好的项目就能进行开发了

运行项目

在cmd命令窗口输入

npm run serve

直到出现下图

根据图中提示的地址http://localhost:8081/#/，用浏览器打开，出现下图就表明前端创建vue项目成功了