vue/cli中使用vue ui可视化创建3.x的脚手架

无论是通过命令行还是通过可视化都是可以创建vue-cli3.x的脚手架的，只不过对于新手来说可视化的工具更加的直观，更加方便

那我们通过可视化的工具来创建一个：

第一步：打开命令窗口先把我们所需的基础给下载下来：npm、nodejs

nodejs官网地址 http://nodejs.cn/

其实npm集成就在node中直接在窗口中输入npm -v查看版本号

当然你也可以使用cnpm

通过命令行

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后回车等待安装完成就行

之后就可以安装全局的vue-cli

npm install -g @vue/cli 或者 cnpm install -g @vue/cli

安装完成之后我们就可以通过命令行来打开脚手架的可视化工具通过vue ui

然后在浏览器中通过http://localhost:8000进入vue的项目管理器中选择好自己所要创建的文件的盘然后点击在此创建新项目

然后我们就进入了创建新项目的详情：项目文件夹需要自己起名字，最好不好和你所创地的文件夹有重复的名字不然后覆盖掉，如果你选了覆盖，包管理器当然是npm了，然后它里面还有一个git的初始化仓库，这要看你用什么了，也可以直接关了，等到项目调好再关联，还有就是你可以通过git拉取项目

当然在我们这里我们就先把它给关了然后点下一步

进入预设就是配置的预设，例如router、vuex什么的，当然也可以选择默认，我们这里通过手动自己去配置，以前使用2.x版本突然直接使用默认的会感觉很奇怪，少了很多配置，所以我们直接用手动的配置，选中手动，点击下一步

在功能里面我们只要选择图中我选中的就行标准、路由Router、vuex、检查这几项就可以了，然后下一步

选择ESLint的标准配合时在项目中会出现一些问题，就是多一行空行时报错了，少空格，多空格都会报错什么的，等下咱们启动项目的时候需要多下几个依赖配置，这个先不用管，咱们先创建项目，点击创建项目

点击创建项目会出现保存预设，就是咱们刚刚的配置是否保存一套好下次直接使用，这个看个人的喜好，我就不保存了啊

在创建项目的过程中我就能看见我们的命令窗口在下载

代表我们的项目创建好了，然后你就可以在自己创建的盘中找到自己创建的项目

然后等项目创建好，如果你用可是创建过文件，当进入可视化工具的时候就会有项目的存在，在创建的过程中选错文件夹可能就会创建在别的项目中，当然也没有问题，你直接拉出来就行,然后就可以直接的导入就可以了，当然如果是第一次创建应该是没有这个问题的，后期如果我发现问题的所在了我也会告诉大家

导入之后会进入这个页面

进入vue项目管理器

然后我们就能看到自己的项目就在vue中然后我们还是回到项目的仪表盘，点击项目就行

然后我们下一些常用的依赖，还有刚刚咱们说的那个问题，咱们先下一个常用的element-ui

因为是3.x，element-ui也出了一个配合脚手架的框架

然后再搜索框中搜索element-ui就会出现配合3.x的vue-cli-plugin-element，然后选中，点击安装

当然这个配置的插件都是默认的，喜欢使用sass的可以把sass给勾上

等待安装和调用完成，然后我们就进入项目，我使用的是idea，至于怎么把项目导入idea我的博客里面有可以参考一下进入之后项目大致是这个样的，然后我们启动一下通过npm run serve

在运行前我们可以在mainjs中多打一个回车然后就会出现下面的错误，咱们就解决一下，这个就是ESlint标准的问题，当然你也可以关了，不过关了你的代码表达度就只能靠自己了，所以接下来咱们需要重新回到咱们的项目管理器中进入依赖

我们需要安装上

eslint、babel-eslint、eslint-plugin-html、eslint-config-standard、eslint-plugin-standard、eslint-plugin-promise

其中

我们需要安装这eslint-plugin-html、eslint-config-standard

安装完成后，咱们就可以刷新一下项目，重新运行项目

运行完项目可能有的人说这跟create创建的打开不一样，这是因为咱们增加了插件element-ui的原因，只需要修改一下，隐藏App.vue中的子组件，然后添加<router-view/>就可以了，在App.vue就是咱们主路由的页面

然后就发现页面是和create是一样的了