新一代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博客

新一代Vue脚手架（create-vue）相关推荐

Vue脚手架与Vue路由
一.Vue脚手架 1.安装脚手架脚手架是基于node的环境. nodejs安装脚手架全局安装:在cmd提示命令符中输入 npm i -g @vue/cli 检测是否安装成功:安装好后可输入vue ...
vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子
一.脚手架生成vue项目 1.安装脚手架:npm install -g @vue/cli 2.以图形界面创建vue项目 https://cli.vuejs.org/zh/guide/creating- ...
Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程.配置第三方依赖.编译vue工程. 特别注意:Vue脚手架是用来方便开发的, ...
使用 Vue 脚手架
3.1 初始化脚手架 3.1.1 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台). 最新的版本是 4.x. 文档: https://cli.vuejs.org/zh/. 3.1. ...
【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...
二、Vue脚手架工程
一.前言使用vue,大部分是使用前后端分离技术,前端vue单独打包成项目运行.首先大概介绍一下vue脚手架,nodejs和webpack之间的关系. vue脚手架: vue官方提供的vue项目目录结 ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
Vue学习（三）—— vue脚手架
文章目录第三部分使用vue脚手架一.介绍及安装 1.概述 2.安装步骤 3.备注 4.模板项目结构 5.关键代码 5.1 index.html 5.2 main.js 5.3 App.vue 5 ...
vue脚手架基础API全面讲解【内附多个案例】
vscode-插件补充 vue文件代码高亮插件-vscode中安装代码提示插件-vscode中安装知识点自测想学会今天的内容, 先测测这几个会不会表达式, 变量是什么 new的作用和含义实例 ...

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

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

新一代Vue脚手架（create-vue）相关推荐

最新文章

热门文章