Vue——vue-cli3.0对比2.0

近期在使用vue-cli3.0写项目，所以就来对比一下vue-cli2.0和vue-cli3.0

Vue-cli 2.0

• 全局安装

npm install -g vue-cli
           

• 创建项目

vue init webpack project-name
           

• 项目目录结构

  

Vue-cli 3.0

• 全局安装

npm install -g @vue/cli-service-global
           

• 创建项目

vue create hello-world
           

• 项目目录结构

  

区别

• 首先很鲜明的一点，vue-cli 3.0的创建方式和vue-cli 2.0不同，这是因为vue-cli 3.0是构建在 webpack 和 webpack-dev-server 之上的，可以理解更高一级于2.0，并具备有新的配置和功能。
• vue-cli 3.0的项目目录结构也不同于vue-cli 2.0，3.0摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。
• 新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。
• 新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。
• 新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。
• 重点来了，3.0最强大之处提供了 vue ui 命令，通过可视化界面来使用 GUI 安装和管理插件（当然也可以通过vue add plugin添加插件），例如使用 iView 按需引入的时候，可以直接在可视化界面中安装 vue-cli-plugin-iview，则可以实现按需引入。