快速搭建Vue3项目：Vite与Vue CLI的选择-优快云博客

本文链接：https://blog.youkuaiyun.com/MrLiber/article/details/121532218

本文介绍了如何创建Vue3项目，重点推荐了vite作为开发服务器，因为它提供快速冷启动、即时热模块更新和按需编译等优势。同时，也提到了使用vue-cli的选项。在配置过程中，详细说明了如何选择特性，包括启用TypeScript，并提供了相关配置的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一篇里面提到了诸多优点，都有点跃跃欲试，那就先来创建一个vue3项目。
这里要先隆重介绍一下vite，vite 是一个基于 Vue3 单文件组件的非打包开发服务器，在生产环境下基于 Rollup 打包，做到了本地快速开发启动：

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成。

vue3的项目创建可以通过两种方式实现了
一是使用 vite 创建(基于Rollup)
官方文档: https://v3.cn.vuejs.org/guide/installation.html

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

二是使用 vue-cli 创建(基于Webpack)
官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

下面是一些项目的配置

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

二、创建vue3项目