【大前端】vue-cli、@vue/cli和vue-create脚手架创建Vue单页应用的区别和使用

  Vue是一款用于构建用户界面的JavaScript流行框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。

  Vue提供了cli脚手架方便我们快速初始化Vue单页应用，但糟糕的是随着Vue版本的迭代相继推出了vue-cli、@vue/cli以及vue-create三款脚手架工具，那么它们有什么区别以及如何使用呢？

vue-cli

  vue-cli是Vue早期推出的一款脚手架工具，主要使用webpack来创建和管理Vue项目。它支持Vue2版本。

⚠️ WARN：不推荐使用!!!

使用vue-cli创建vue应用

1、全局安装

npm install -g vue-cli

2、创建项目

vue init <template-name> <project-name>

vue-cli是Vue早期的脚手架工具，本质上只是从GitHub拉取模版，存在很多设计上的缺陷，详情可参考专访Vue作者尤雨溪：Vue CLI 3.0重构的原因

@vue/cli

  @vue/cli是vue-cli的后续版本，支持创建Vue2和Vue3项目，并且默认使用webpack作为构建工具。

⚠️ TIPS：Vue2可以使用，目前存量的Vue2项目绝大部分都是使用@vue/cli创建，但@vue/cli目前已处于维护模式!!!

1、全局安装

npm install -g vue-cli

2、创建项目

vue create <project-name>

vue-create

  create-vue是Vue官方推荐的用于快速启动Vite驱动的Vue项目的脚手架工具。它简化了创建新Vue项目的过程，提供了预配置的项目结构，并集成了Vite的强大功能。相比Webpack构建和启动更快，全面拥抱ES模块和Rollup，开发体验更好。

💯 TIPS：支持Vue2和Vue3，推荐新项目使用!!!

创建项目

npm create vue@latest

  这个命令会自动安装和执行create-vue。后续跟随命令行的提示继续操作即可。

省流总结

1、避免使用vue-cli

2、对老项目来说

• vue2项目通常使用的是@vue/cli脚手架创建的项目。
• vue3项目通常使用的是vue-create脚手架创建的项目。

3、对新项目来说

• 优先使用vue-create脚手架创建项目。
• 依赖特定的Webpack的特性时使用@vue/cli创建项目。