Vue-cli脚手架2.0和3.0创建项目的区别？

一、生成项目命令

1、安装3.x版本的Vue脚手架：

npm install -g @vue/cli

创建Vue项目命令：

vue create 项目名称

或基于ui界面创建Vue项目，命令：vue ui

2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目

需要安装一个桥接工具才能使用 vue-cli 2.x创建项目

npm install -g @vue/cli-init

创建Vue项目：

vue init webpack 项目名称

二、目录的区别

vue-cli 3.0的项目摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。

新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。

新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。

新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。

src文件夹中多了 views 文件夹，相比2.0，在 index.js 变为了 router.js

2.0版本相比3.0版本 有build和config文件夹等，src文件夹中有router文件夹，里面有index.js

三、启动项目

3.x启动项目：  

npm run serve

2.x启动项目：

npm run dev  或   npm run start

四、配置项

vue-cli2.0的域名配置，分为开发环境和生产环境，所以配置域名时，需要在config中的dev.env.js和prod.env.js中分别配置

前面说过，到了3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

当然，没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

在3.0中，vue.config.js中有关于mock的配置

要注意的是：mockjs是用来模拟产生一些虚拟的数据，方便前端在后端接口还没有开发出来时独立开发

即使使用了真实的url，但是mockjs拦截了ajax请求，返回的是设定好的本地数据

如果你想正常从后端获取数据，就要关掉mock的使用，我是直接删掉的，当然你可以选择别的办法

main.js中有一段关于mock.js的描述（注意上线前要去掉你的mock）

另外3.0还多了可视化界面，找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作。