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——vue-cli3.0对比2.0_第1张图片

Vue-cli 3.0

  • 全局安装
	npm install -g @vue/cli-service-global
  • 创建项目
	vue create hello-world
  • 项目目录结构
    Vue——vue-cli3.0对比2.0_第2张图片

区别

  • 首先很鲜明的一点,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摈弃了 configbuildstatic 目录,新增了 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,则可以实现按需引入。
Vue——vue-cli3.0对比2.0_第3张图片

你可能感兴趣的:(#,Vue.js,web前端全栈)