Vue-cli3.X搭建Vue开发环境

用Vue-cli3.X搭建Vue开发环境的方法有两种：

第一种：基于 交互式命令行 的方式，创建新版 vue 项目

第一步：

打开控制台输入安装命令

 npm i -g @Vue/cli

然后回车，要等待安装完成
注意：我是用淘宝镜像所以是cnpm i -g @Vue/cli，如果不用淘宝镜像用npm i -g @Vue/cli即可
安装完成后控制台输入命令:

vue -V

检查脚手架是否安装完成已经安装的版本
G4ubmV0L3FxXzQwMDU3MTM4,size_16,color_FFFFFF,t_70)

第二步：

创建一个名字为 my-project 的项目
在控制台输入命令：

npm create my-project 

回车，然后跳出一个交互式问答面板，通过上下箭头 ↑ ↓ 来选择默认方式还是手动选择某些功能来创建项目
①是我之前创建的项目模板，不用管
②默认方式创建项目
③通过手动选择某些功能来创建项目
在这里我用的手动方式来创建，此时会控制台会弹出一些功能给我们选，自己可以根据自己的项目要求来选择功能，我这里只是做演示而已

这里通过上下箭头 ↑ ↓ 切换不同的选项，按 空格键 就是选中，选好自己所需弄能后，按回车
弹出是否使用历史模式路由，可以根据自己的需求来选择，我这里就不用历史模式的了，就输入n；推荐大家使用hash模式的
回车后弹出
这里推荐选择标准的ESlint语法版本；
回车后弹出
这里是问我们什么时候进行ESlint语法规则校验，默认选第一项
回车后弹出
这里是配置文件创建问题：
第一种是创建单独配置文件，第二种把配置文件统一放到package.json文件中，这里推荐放到单独配置文件中
回车后弹出
这里问我们是否把当前的一些选择作为模板，供后续项目再创建时直接选择模板就可以了，这里看各自需求要不要创建模板了，我这里选 n；
回车后会进入项目创建过程

项目创建完成

cd my-project 表示进入当前项目跟目录
npm run serve 运行项目

项目已经可以跑起来了，但是页面不会自动在浏览中打开，要手动的在浏览器中输入http://localhost:8080才行；

第三步：让项目跑起来后，自动的在浏览器中打开：

在跟目录下创建一个vue.config.js文件
然后在vue.config.js文件写入一下代码：

module.exports = {
    devServer:{
      port: 8888, //端口号
      open: true //true为自动打开浏览器
    } 
}

再次运行项目，页面就会自动在浏览器中打开了；

第二种：基于 图形化界面 的方式，创建新版 vue 项目

第一步vue可视化面板：

	在控制台中输入命令：

vue ui

来打开浏览器面板，通过鼠标选择的方式来创建项目；

浏览器的显示：

第二步创建项目和选择所需的依赖：

点击 创建

然后再点击 在此创建新项目，进入下步

这里只需要填写这两项就可以了，进入下一步：

这里选择手动配置项目，进入下一步：
根据需求选择自己的配置；
一下几个为必选：

进入下一步：

选择这两个选项；点击 创建项目 ；进入下一步：

如果想让当前项目保存为模板就选择保存预设，否则就不保存预设；
进入下一步：
项目创建成功后，会自动进入项目仪表盘：

项目的配置信息都可以在仪表盘里面查看；要增加或者卸载配置信息都可以这这里操作
如果想要安装某个插件就插件里，搜索安装就好了；

第三步运行项目：

选择任务，点击serve

serve 是运行项目
build 打包项目

点击 运行，进行开发调试：

点击 运行 后：

打钩的表示运行成功了；
想要停止项目运行就点击 停止；
想要在浏览器中打开页面就点击 启动app

想要查看输出信息就点击 输出：

这里就可以查看到输出信息了；

vue-cli3.x搭建vue项目大概就是这样子，如有不同大家可以多多提建议~~