Vue2.0和3.0区别(总结版，不断更新)

一 安装及版本切换

查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4

vue --version

如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装
安装3.0版本:

npm install -g vue-cli

安装3.0版本：

npm install -g @vue/cli

版本切换，即卸载当前版本，安装另外的版本
从2.0升级到3.0：

npm uninstall -g vue-cli
npm install -g @vue/cli

从3.0降到2.0：

npm uninstall -g @vue/cli
npm install -g vue-cli

二 项目初始化

2.0初始化，vue init <模板名称（webpack比较常用）> [项目名称]

vue init webpack cli2-test

2.0项目初始化参数介绍

//项目名称
 Project name ...
 //作者的信息，会默认从git中读取信息
 Project description ...
 Author ...
 //vue build的选项 1.runtime-compiler   2.runtime-only (一般选第一个就好)
 vue build ...
 //是否安装vue-router，一般选用YES，省去手动创建路由
 Install vue-router？ ..
 //是否使用ESLint检测代码规范，规范可根据选项选择不同的规范库或者自己添加规范
 use ESLint to link your code
 //是否写单元测试 （一般不使用）
 Set up unit tests
 //是否使用Nightwatch来进行e2e测试 （2代表to  e to e 点对点）
 Setup e2e test with Nightwatch？
 //使用npm或者yarn包管理工具
 use npm
 use yarn

 

3.0初始化，vue create [项目名称]

vue create cli3-test

4.0项目初始化参数介绍

//选择一个配置方式
 please pick a perset  (一般选最后一个Manually select features（手动选择特性） )
 //选择对于你的工程所需要的特性 （用空格选择）
 check the features needed for your project
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
 //对应的配置文件单独生成还是放在package.json里
 where do you prefer placing config for babel
 //要不要把刚才自己选择的配置保存下来
 save this as a preset for future projects?

三 目录结构对比

2.0目录结构

3.0目录结构

对比一下两种方式初始化出来的项目结构，下面说一些对我们开发影响比较大的主要的变化

3.0版本中项目环境变量配置文件没有了（dev.env.js / prod.env.js）
我们可以通过在项目根目录下手动创建不同环境的配置文件，具体的环境变量名称由package.json中运行参数决定,下面举个例子添加development、production和uat版本的环境变量：