新一代Vue脚手架（create-vue）

Vue2.X中创建一个项目，我们基本都会选择Vue官方提供的脚手架工具Vue-cli（也可以基于webpack手动搭建这都没问题），如果想了解Vue-cli创建项目的过程，可以查看Vue-cli创建Vue项目工程步骤详解。

后来尤大新出了Vite，我们可以使用Vite创建项目，但是只能选择官方提供的固定配置的模板，并不能根据项目需要在创建工程时就完成一些必要的配置，好处是支持好多前端框架，但是对我没啥用，因为我只认Vue。

相信大家已经看到了Vue的新版文档了吧。

https://vuejs.org/

在官方文档的快速开始中有这么一段内容（如下图）。

其意思就是告诉大家可以使用新的脚手架create-vue创建Vue工程了。

下面把create-vue创建工程的每一步都给大家注释一下（键盘左右键选择Yes或No，选定后回车）。

// 项目名称
✔ Project name: … <your-project-name>
// TypeScript的支持
✔ Add TypeScript? … No / Yes
// JSX的支持
✔ Add JSX Support? … No / Yes
// 支持路由
✔ Add Vue Router for Single Page Application development? … No / Yes
// 状态管理
✔ Add Pinia for state management? … No / Yes
// Vitest测试框架
✔ Add Vitest for Unit testing? … No / Yes
// Cypress E2E测试工具
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
// ESLint代码格式化规范检查
✔ Add ESLint for code quality? … No / Yes
// Prettier代码格式化
✔ Add Prettier for code formatting? … No / Yes

从上面可以看出，create-vue可以配置对TypeScript的支持，也可以在创建项目是添加路由管理，状态管理，不过需要注意的是在create-vue当中原来的状态管理已经由Vuex替换为Pinia了。

需要注意的是create-vue创建的工程已经不是基于webpack二是基于vite的。

所以下一代Vuex（Pinia）不学你就out了赶紧学起来。

相比通过Vite脚手架创建Vue项目，create-vue在项目创建时就可以解决项目中需要的路由管理、状态管理\代码规范管理等一系列的配置，所以create-vue的优势在于不需要在项目创建之后一个一个添加相应配置。

所以如果你想要在新的项目中使用Vite、TypeScript、Pinia……，那就用起来。

往期内容已全部收录在专栏中：

Flutter专栏_WEB前端李志杰的博客-CSDN博客

Vue专栏_WEB前端李志杰的博客-CSDN博客